我想在Shopify商店中创建一个自定义商店页面。购物过程将在此页面中逐步处理。第一步应该有一些变体选项，当用户选择选项时得到满足条件的产品。之后，选择他想要的产品，然后去结帐选项。
我创建一个自定义页面并显示一些静态数据。
<form method="post" action="/cart/add">
<section class="prtn_cstm_crt_pg">
<!--====================== step forms content========================= -->
<div class="step-content">
<!-- ~~~~~~~~~~~~~STEP 01~~~~~~~~~~~~~~ -->
<div class="cstm_crt_first-step">
<div class="Step_bnner">
<h1 class="Step_bnner_heading">CREATE YOUR FIRST BOX</h1>
<p class="Step_bnner_subtitle">Choose from 15 healthy, resturant-quality meals each week</p>
</div>
<div class="first-step-inner">
<!-- Choose Meal -->
<div class="Choose-meal">
<h2 class="step_heading">1. CHOOSE YOUR PROTEIN PREFERENCE</h2>
<p class="step_para">Your preferences will help us show you the most relevant meals first. You
will still be able to view all meals.</p>
<div class="select_boxs_first">
<div class="select_box">
<input type="radio" id="Veg_and_nonveg_meal_radio" name="protien-preference"
class="select_radio_input" value="Meat & Vegan">
<label class="selector-item_label" for="Veg_and_nonveg_meal_radio">
<span class="select_box_title">Meat & Vegan</span>
</label>
</div>
<div class="select_box">
<input type="radio" id="meat_radio" name="protien-preference" class="select_radio_input"
value="Meat Only">
<label class="selector-item_label" for="meat_radio">
<span class="select_box_title">Meat Only</span>
</label>
</div>
<div class="select_box">
<input type="radio" id="vegan_radio" name="protien-preference"
class="select_radio_input" value="Vegan Only">
<label class="selector-item_label" for="vegan_radio">
<span class="select_box_title">Vegan Only</span>
</label>
</div>
</div>
</div>
<!-- Choose Meal End -->
<!-- Meal Quantity -->
<div class="Meal-Quantity">
<h2 class="step_heading">2. CHOOSE YOUR PORTION PREFERENCE</h2>
<div class="select_boxs_second">
<div class="select_box_with_price">
<div class="select_box">
<input type="radio" id="Standard_meal_radio" name="Meal-Quantity"
class="select_radio_input" value="Standard">
<label class="selector-item_label" for="Standard_meal_radio">
<span class="select_box_title">Standard</span>
</label>
</div>
</div>
<div class="select_box_with_price">
<div class="select_box">
<input type="radio" id="large_meal_radio" name="Meal-Quantity"
class="select_radio_input" value="Large">
<label class="selector-item_label" for="large_meal_radio">
<span class="select_box_title">Large</span>
</label>
</div>
</div>
</div>
</div>
<!-- Meal Quantity -->
<!-- Meal Number -->
<div class="meal__number">
<h3 class="step_heading">3. SELECT MEALS PER WEEK</h3>
<div class="select_boxs_second">
<div class="select_box_with_price">
<div class="select_box">
<input type="radio" id="six_meal_pr_wk" name="meal__number"
class="select_radio_input" value="6">
<label class="selector-item_label" for="six_meal_pr_wk">
<span class="select_box_title">6</span>
</label>
</div>
<div class="select_box_description">
<!-- <span class="meal_price_by_number"><em>(£7.49)</em> £5.99/meal</span> -->
</div>
</div>
<div class="select_box_with_price">
<div class="select_box">
<input type="radio" id="eight_meal_pr_wk" name="meal__number"
class="select_radio_input" value="8">
<label class="selector-item_label" for="eight_meal_pr_wk">
<span class="select_box_title">8</span>
</label>
</div>
<div class="select_box_description">
</div>
</div>
<div class="select_box_with_price">
<div class="select_box">
<input type="radio" id="ten_meal_pr_wk" name="meal__number"
class="select_radio_input" value="10">
<label class="selector-item_label" for="ten_meal_pr_wk">
<span class="select_box_title">10</span>
</label>
</div>
<div class="select_box_description">
</div>
</div>
<div class="select_box_with_price">
<div class="select_box">
<input type="radio" id="twelve_meal_pr_wk" name="meal__number"
class="select_radio_input" value="12">
<label class="selector-item_label" for="twelve_meal_pr_wk">
<span class="select_box_title">12</span>
</label>
</div>
<div class="select_box_description">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ~~~~~~~~~~~STEP 01 END~~~~~~~~~~~~ -->
</div>
</section>
<div class="product">
<div class="page-width">
<div class="product-variant-details">
<!-- The updated variant details will be displayed here -->
</div>
</div>
</div>
<button id="plan-submit-btn" type="submit" class="custom_cart_next_btn">SELECT PLAN</button>
</form>
1条答案
按热度按时间oknrviil1#
HTML看起来不错。
我们是在谈论多种产品吗？
还是只有一种产品有多种变体？
您应该使用一个具有所有这些变体的产品来执行此操作，并为此页面创建一个自定义Liquid产品模板文件。
在将模板连接到产品之后，您可以轻松地使用Liquid产品对象来访问所需的所有信息。
当涉及到代码时，您有两种选择：
1.使用主题的原始产品模板并调整它以满足您的需求。
1.手动-这实际上是不太推荐的选项，因为你将不得不编写一堆代码，其中包含一堆主题代码可能已经完成的迭代。
如果要我选这个，
<input type="hidden" name="id" value="{{ product.variants[0].id }}" />添加到表单中，此输入的值是您希望添加到购物车中的变体的ID。{ variantID: [option1, option2, option3] }, ...）的信息。应该看起来像这样：
{ 123456789: ['Vegan', 'Large', '6'], ... }检查对象以确定哪个是新选择的变体ID（根据所选选项），并将“id”输入的值更改为新选择的变体ID。
这样做，一切都应该正常工作。
告诉我你是否适合。