Dej*_*can 5 product options variations shopify
好的，所以我是 Shopify 的新手，所以这可能很容易解决，我只是没有“明白”。
我想我正在使用旧主题，因为新主题似乎已经有了一个 js 文件，可以在为产品进行选项选择时更新 URL 中的变体 ID。我一直试图弄清楚，但我完全迷失了。我的主题似乎根本没有这样的东西。
我一直在尝试使用 jQuery 进行不同的事情，以从选项中获取变体 ID 值并history.pushState更改 URL 中的 ID，但这不是最好的解决方案，并且不能始终如一地工作，也不是真正的“修复”。
尽管我只想将主题更改为更新的、有效的主题，但遗憾的是，这不是一个选择，而且我知道这个主题可能很糟糕。
这是网站：https : //elizabethsuzann.com/collections/all-products
这是产品文件：
<div id="content" class="main-content">
<div id="page">
<div class="row full-width clearfix">
<div id="product-{{ product.id }}">
<div class="column medium-6 large-6 product-photos product__images left show-for-small-only">
{% include "product-toggler" %}
</div>
<div class="column medium-6 large-6 product__description right" id="product-right">
<div id="product-description">
<div class="row product__details">
<div class="column medium-9">
{% if settings.vendor %}<h3>{{ product.vendor }}</h3>{% endif %}
<h1 class="product__title medium-text-left small-text-center">{% include "product-title-replacer" %}</h1>
<h2 class="product__fabric medium-text-left small-text-center">
{% include 'tag-looper' %}
</h2>
<div class="yotpo bottomLine"
data-appkey="ydEHp58GjhymPiIi6x0gT4BYZjK5cAQOeGanUwmT"
data-domain="{{ shop.permanent_domain | escape }}"
data-product-id="{{ product.id }}"
data-product-models="{{ product.id }}"
data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: 'large' |replace: '?', '%3F' | replace: '&','%26' }}"
data-description="{{ product.description | escape }}"
data-bread-crumbs="{% for tag in product.tags %}{{ tag | escape }};{% endfor %}">
</div>
<div class="spacer-20"></div>
{% if settings.subtitle %}<p>{{ page_title }}</p>{% endif %}
</div>
<div class="column medium-3">
{% if product.available %}
{% if product.compare_at_price > product.price %}
<h3 class="product-price product__price medium-text-right small-text-center onsale"
itemprop="price"><span
style="color:#f46e6e;">{{ product.price | money }}</span>
<br>
<span class="compare-price was"
style="text-decoration: line-through;">{{ product.compare_at_price | money }}</span>
</h3>
{% else %}
<h3 class="product-price product__price medium-text-right small-text-center"
itemprop="price">{{ product.price | money }}</h3>
{% endif %}
<!--OUT OF STOCK!-->
{% else %}
<h3 class="product-price product__price medium-text-right small-text-center soldout-text"
itemprop="price">Sold Out</h3>
<p>
<a href="https://elizabethsuzann.com/pages/contact" target="_blank"
class="ask-a-question-product">Ask A Question
</a>
</p>
{% endif %}
</div>
</div>
{% include 'short-form' %}
<div class="clearfix"></div>
<div class="product__accordions text-editor">
<ul class="accordion" data-accordion id="productAccordion">
<li class="accordion-navigation active">
<a href="#panel1a">Description</a>
<div id="panel1a" class="content active">
{{ product.description | replace: '<h5>', '</div></li><li class="accordion-navigation"><a href="#panela">' | replace: '</h5>', '</a><div id="panela" class="content">' }}
</div>
</li>
</ul>
</div>
{% if settings.popups %}
<div class="product__modals">
<ul class="inline-list">
<li>
<a href="#" data-reveal-id="sizeChart">Size Chart</a>
</li>
<li>
<a href="#" data-reveal-id="returnPolicy">Return Policy</a>
</li>
<li>
<a href="#" data-reveal-id="question">Ask A Question</a>
</li>
</ul>
</div>
{% endif %}
</div>
</div>
<div class="column medium-6 large-6 product-photos product__images left show-for-medium-up">
{% include "product-toggler" %}
{% include "customer-slideshow" %}
</div>
<div class="show-for-small-only">{% include "customer-slideshow" %}</div>
</div>
</div>
</div>
</div>
<div class="clear"></div>
<div class="product-single-extras">
{% if settings.diversity_slideshow_enable %}
{% assign hasDiversity = false %}
{% for image in product.images %}{% assign alt_text = image.alt %}{% if alt_text contains "DIVERSITY_" %}{% assign hasDiversity = true %}{% endif %}{% endfor %}
{% if hasDiversity == true %}
<div class="full-width row collapse diversity-panel">
<div class="small-12 columns diversity-panel-container">
<div>{% for image in product.images %}{% assign alt_text = image.alt %}{% if alt_text contains "DIVERSITY_" %}
<img src="{{ image | img_url: 'master' }}"
alt="{{ alt_text | remove: 'DIVERSITY_' | replace: '\"', '$quot;' }}"/>{% break %}{% endif %}{% endfor %}
</div>
<ul class="diversity-panel-details brandon"></ul>
</div>
</div>
{% endif %}
{% endif %}
{% assign hasSlides = false %}
{% for image in product.images %}
{% assign alt_text = image.alt %}
{% if alt_text contains "SLIDESHOW" %}
{% assign hasSlides = true %}
{% endif %}
{% endfor %}
{% if settings.product_slideshow_enable and hasSlides == true %}
<div class="full-width row collapse image-slideshow">
<div class="small-12 columns">
<div class="loader">
<div class="load-watch">
<div class="slider">
{% for image in product.images %}
{% assign alt_text = image.alt %}
{% if alt_text contains "SLIDESHOW_" %}
<div>
{% if alt_text contains "http://" or alt_text contains "https://" %}
<a href="{{ alt_text | remove: 'SLIDESHOW_[[' | remove: ']]' }}">{% endif %}
<img src="{{ image | img_url: 'master' }}"
alt="{{ alt_text | remove: 'SLIDESHOW_' }}"/>
{% if alt_text contains "http://" or alt_text contains "https://" %}
</a>{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% include 'related-products-tag' %}
<div class="clear"></div>
</div>
<div class="yotpo yotpo-main-widget" data-product-id="{{ product.id }}" data-name="{{ product.title | escape }}"
data-url="{{ shop.url }}{{ product.url }}"
data-image-url="{{ product.featured_image | product_img_url: "large" |replace: '?', '%3F' | replace: '&','%26' }}"
data-description="{{ product.description | escape }}"></div>
{{ 'inStockAlerts.js' | asset_url | script_tag }}
{{ 'extendedSizes.js' | asset_url | script_tag }}
集合文件：
<!-- /snippets/collection-sidebar.liquid -->
<div id="page" class="row full-width">
{% if collection.image %}
<div class="full-width row collapse collection-header-image">
<div class="small-12 columns">
<div class="loader">
<div class="load-watch">
{% if collection.image.alt contains "[a]"%}
{% assign altTextArray = collection.image.alt | split: "[a]" %}
{% assign urlArray = altTextArray[1] | split: "[/a]"%}
{% endif %}
{%if urlArray[0] %}<a href="{{ urlArray[0] }}" title="{{collection.title}}">{%endif%}
<img src="{{ collection.image | img_url: 'master' }}" alt="{{ collection.image.alt }}">
{%if urlArray[0] %}</a>{%endif%}
</div>
</div>
</div>
</div>{% endif %}
<div class="row show-for-small-only">
<div class="column text-center"><h1>{%if collection.title != "Materials" %}{{ collection.title }}{% else %}{%if current_tags.first %}{{current_tags.first}}{% endif %}{% endif %}</h1></div>
<div class="spacer-30"></div>
</div>
<div class="clear"></div>
<div id="content" class="full-width">
{% paginate collection.products by 21 %}
<!-- START SIDEBAR -->
{% include 'sidebar-collection' %}
<!-- END SIDEBAR -->
<div class="column medium-9 large-10 main-content" id="product-collection">
{% if collection.description.size > 0 %}
<div class="collection-description text-editor hide-for-small">
{{ collection.description }}
</div>
{% endif %}
<ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3 xxlarge-block-grid-4">
{% for product in collection.products %}
<li class="product-index" id="prod-{{ product.id }}" data-alpha="{{ product.title }}" data-price="{{ product.price }}">
<div class="product-index-inner">
{% if product.available %}
{% for col in product.collections %}
{% if col.handle == 'new' %}
<div class="new icn">NEW IN</div>
{% endif %}
{% endfor %}
{% if product.price < product.compare_at_price %}
<div class="sale-item icn">SALE</div>
{% endif %}
{% else %}
<div class="so icn">SOLD OUT</div>
{% endif %}
</div>
<div class="image_hover">
<div class="loader">
<div class="load-watch">
<a href="{{ product.selected_or_first_available_variant.url | within: collection }}" title="{{ product.title | escape }}" style="display:block;">
{% for image in product.images %}
{% if forloop.first %}
<img class="variant-image" src="{{ product.images[0] | product_img_url: 'master' }}" alt="image.alt" data-holder="{{ product.images[0] | product_img_url: 'master' }}" />
{% endif %}
{% endfor %}
</a>
</div>
</div>
{% if product.available %}
{% assign v_image = false %}
{% for vimage in product.variants %}
{% if vimage.image %}
{% assign v_image = true %}
{% endif %}
{% endfor %}
{% if v_image %}
<div class="variants" style="padding: 5px;">
{% for option in product.options %}
{% assign opt_index = -1 %}
{% if option == 'Color' %}
{% assign opt_index = forloop.index0 %}
{% endif %}
{% if opt_index > -1 %}
{% assign color_done = '' %}
{% for variant in product.variants %}
{% assign color = variant.options[opt_index] %}
{% assign colorFirst = color | split: ' ' %}
{% for coloring in colorFirst %}
{%if forloop.first%}
{% assign colorClass = coloring %}
{%endif%}
{% endfor %}
{% unless color_done contains color %}
{% assign color_image = color | downcase | replace: ' ','-' | append: '.png' %}
{% if variant.image %}
<div class="variant {{ colorClass | downcase }}{% if forloop.first %} active{% endif %}" data-link="{{ product.url | within: collection }}?variant={{ variant.id }}" data-variant="{{ variant.image | img_url: 'original' }}" title="{{ variant.title }}" style="background: url({{ color_image | asset_url }});"></div>
{% endif %}
{% assign color_done = color_done | append: color | append: ',' %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endif %}
</div>
<div class="product-info">
<div class="product-info-inner row">
<div class="column medium-8 small-text-center medium-text-left">
{% if settings.vendor %}<h4><a href="{{ product.url }}"> {{ product.vendor }}</a></h4>{% endif %}
<h3><a href="{{ product.url }}">{% include "product-title-replacer" %}</a></h3>
<h2 class="product__fabric medium-text-left small-text-center">
{% include "tag-looper" %}
</h2>
</div>
<div class="column medium-4 small-text-center medium-text-right">
<div class="price">
{% if product.price < product.compare_at_price %}
<div class="onsale">{{ product.price | money }}</div>
<div class="was" style="display:block;">{{ product.compare_at_price | money }}</div>
{% else %}
<div class="prod-price">{% if product.price_varies %} from {{ product.price_min | money }} - {{ product.price_max | money }} {% else %}{{ product.price | money }}{% endif %}</div>
{% endif %}
</div>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="column text-center">
<div id="pagination">
<!-- <span class="count">Showing items {{ paginate.current_offset | plus: 1 }}-{% if paginate.next %}{{ paginate.current_offset | plus: paginate.page_size }}{% else %}{{ paginate.items }}{% endif %} of {{ paginate.items }}.</span> -->
{% if paginate.previous %}
{{ '<' | link_to: paginate.previous.url }}
{% endif %}
{% for part in paginate.parts %}
您似乎没有获得当前所选产品变体的正确值。
var selectorDropdown = $(".select option:selected").val();
selectorDropdown总是有价值的"12893562601560"
如果您仔细查看选择的选项，会发现没有选择任何选项。
只需检查您的selectorDropdown值是否正确并且它应该可以正常工作。
PS：我拿了参考。https://elizabethsuzann.com/collections/all-products/products/georgia-tee-midweight-linen?variant=12893562601560
| 归档时间： |
|
| 查看次数： |
3611 次 |
| 最近记录： |