Question

为简单起见，我试图动态地更改某个变体上产品的价格（足够容易）。使用一些简单的编码就可以了。随着我的深入研究，我获得了相当独特的产品页面，其中有多个购买CTA（产品购买表格），它们会诱使客户购买，例如台式机上的其他位置，移动设备上的其他位置以及之后的移动下拉菜单x滚动高度（一页上3种不同的样式）。

我通过创建3个不同的div块来简单地做到这一点，并根据媒体查询使用CSS来显示/隐藏这些块。很简单。

我注意到了一件奇怪的事：data-product-price属性仅反映一种产品形式{% form 'product', product% }（我的Shopify当前设置为显示变体更改/购买/数量）。它仅适用于DOM上加载的第一个表单（即使已隐藏）。

在这种情况下，桌面CTA区域不会反映变体更改的价格变化，只会加载第一个CTA区域（这是移动设备上的下拉版本）。一旦选择了变体，它也会同时更改其他形式（这是我希望每种形式产生的行为）。

这是我如何进行此设置的一个小例子：

我将方差全局分配给一个变量：

{% assign current_variant = product.selected_or_first_available_variant %}

我的包装器（用于整个产品页面）具有以下包含的属性：

<div 
  class="product-page"
  data-product-container
  itemscope
  itemtype="http://schema.org/Product"
  data-shop-default-currency="{{ shop.currency }}"
  data-product-options-size="{{ product.options.size }}"
  data-product-options-first="{{ product.options.first }}"
  data-product-variants-size="{{ product.variants.size }}"
  data-product-variants-first="{{ product.variants.first.title }}">

  <script data-product-json type="application/json">
    {{ product | json }}
  </script>

// product page stuff

</div>

然后在我所有的产品CTA包装器下，我将其称为产品形式，变体选择器和动态价格（请注意，这只是段调用时的概述，而不是整个实际代码）：

<div class="product-cta desktop> // this is 1 of 3 blocks. Each block has either the desktop, mobile or mobile-dropdown class that effects the visability in viewports. The contents of the block also do change slightly on orientation. 

 {% form 'product', product %}

 <h4 class="product-price" data-product-price> {{ current_variant.price | money_with_currency }}</h4> // this is where the price needs to change dynamically. Again, only the first product-cta block in the DOM behaves as expected.

 <select name="id" id="productSelect-{{ product.id }}" class="product-single__variants">
  {% for variant in product.variants %}
   {% if variant.available %}
     <option {% if variant == current_variant %} selected="selected" {% endif %} value="{{ variant.id }}" data-sku="{{ variant.sku }}">{{ variant.title }}</option>
   {% else %}
     <option>
      {{ variant.title }} - {{ 'products.product.sold_out' | t }}
     </option>
   {% endif %}
  {% endfor %}
 </select>

</div> // end block

我已根据屏幕大小用.remove()删除了其他两个块，以测试在只有一个块的情况下它们是否有效，并且可以。所以以为嘿，也许我可以删除其他问题，然后插入一个if视图，但这似乎令人生畏。我认为必须有一种更简单的方法。

我假设data-product-price属性将是全局属性，并且在同一情况下会受到三种形式的影响，但事实并非如此。

在产品页面上动态显示“数据产品价格”，其中有多个“相同”的购买表单不起作用-Shopify

0 个答案: