mirror of
https://github.com/frappe/erpnext.git
synced 2026-05-23 15:09:20 +00:00
Item Alternate Image Features in e-commerce site. (#15044)
* [ADD] Added Item Alternate Image Features in e-commerce site. * [IMP] Improved Code for Item Alternate Image Feature. * [IMP] Improved code for Item alternative image functionality. * Remove .css file and make a build for erpnext-web.css * Cleanup styling for item alternate image, also add delegated handler * Spaces -> Tabs * Spaces -> Tabs in item.html
This commit is contained in:
Solufyin
@@ -8,108 +8,130 @@
|
||||
|
||||
{% block page_content %}
|
||||
{% from "erpnext/templates/includes/macros.html" import product_image %}
|
||||
<div class="item-content" style="margin-top:20px;">
|
||||
<div class="item-content">
|
||||
<div class="product-page-content" itemscope itemtype="http://schema.org/Product">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<div class="row">
|
||||
{% if slideshow %}
|
||||
{% include "templates/includes/slideshow.html" %}
|
||||
{% else %}
|
||||
{{ product_image(website_image, "product-full-image") }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="col-sm-6" style="padding-left:20px;">
|
||||
<h2 itemprop="name" style="margin-top: 0px;">{{ item_name }}</h2>
|
||||
|
||||
<p class="text-muted">
|
||||
{{ _("Item Code") }}: <span itemprop="productID">{{ variant and variant.name or name }}</span></p>
|
||||
<br>
|
||||
<div class="item-attribute-selectors">
|
||||
{% if has_variants %}
|
||||
{% for d in attributes %}
|
||||
{% if attribute_values[d.attribute] -%}
|
||||
<div class="item-view-attribute {% if (attribute_values[d.attribute] | len)==1 -%} hidden {%- endif %}"
|
||||
style="margin-bottom: 10px;">
|
||||
<h6 class="text-muted">{{ _(d.attribute) }}</h6>
|
||||
<select class="form-control"
|
||||
style="max-width: 140px"
|
||||
data-attribute="{{ d.attribute }}">
|
||||
{% for value in attribute_values[d.attribute] %}
|
||||
<option value="{{ value }}"
|
||||
{% if selected_attributes and selected_attributes[d.attribute]==value -%}
|
||||
selected
|
||||
{%- elif disabled_attributes and value in disabled_attributes.get(d.attribute, []) -%}
|
||||
disabled
|
||||
{%- endif %}>
|
||||
{{ _(value) }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
{% set slideshow_items = frappe.get_list(doctype="Website Slideshow Item", fields=["image"], filters={ "parent": doc.slideshow }) %}
|
||||
<div class="col-md-1">
|
||||
{%- for slideshow_item in slideshow_items -%}
|
||||
{% set image_src = slideshow_item['image'] %}
|
||||
{% if image_src %}
|
||||
<div class="item-alternative-image border">
|
||||
<img src="{{ image_src }}" height="50" weight="50" />
|
||||
</div>
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<br>
|
||||
<div style="min-height: 100px; margin: 10px 0;">
|
||||
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
|
||||
<h4 class="item-price hide" itemprop="price"></h4>
|
||||
<div class="item-stock hide" itemprop="availability"></div>
|
||||
<div class="col-md-5">
|
||||
<div class="item-image">
|
||||
{% set first_image = slideshow_items[0]['image'] %}
|
||||
{{ product_image(first_image, "product-full-image") }}
|
||||
</div>
|
||||
<div class="item-cart hide">
|
||||
<div id="item-spinner">
|
||||
<span style="display: inline-block">
|
||||
<div class="input-group number-spinner">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="dwn">
|
||||
–</button>
|
||||
</span>
|
||||
<input class="form-control text-right cart-qty" value="1">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="up" style="margin-left:-2px;">
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="col-md-6">
|
||||
{{ product_image(website_image, "product-full-image") }}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="col-sm-6">
|
||||
<h2 itemprop="name">{{ item_name }}</h2>
|
||||
<p class="text-muted">
|
||||
{{ _("Item Code") }}: <span itemprop="productID">{{ variant and variant.name or name }}</span>
|
||||
</p>
|
||||
<br>
|
||||
<div class="item-attribute-selectors">
|
||||
{% if has_variants and attributes %}
|
||||
{{ attributes }}
|
||||
{#
|
||||
|
||||
{% for d in attributes %}
|
||||
{% if attribute_values[d.attribute] -%}
|
||||
<div class="item-view-attribute {% if (attribute_values[d.attribute] | len)==1 -%} hidden {%- endif %}"
|
||||
style="margin-bottom: 10px;">
|
||||
<h6 class="text-muted">{{ _(d.attribute) }}</h6>
|
||||
<select class="form-control"
|
||||
style="max-width: 140px"
|
||||
data-attribute="{{ d.attribute }}">
|
||||
{% for value in attribute_values[d.attribute] %}
|
||||
<option value="{{ value }}"
|
||||
{% if selected_attributes and selected_attributes[d.attribute]==value -%}
|
||||
selected
|
||||
{%- elif disabled_attributes and value in disabled_attributes.get(d.attribute, []) -%}
|
||||
disabled
|
||||
{%- endif %}>
|
||||
{{ _(value) }}
|
||||
</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
|
||||
#}
|
||||
{% endif %}
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
|
||||
<h4 class="item-price hide" itemprop="price"></h4>
|
||||
<div class="item-stock hide" itemprop="availability"></div>
|
||||
</div>
|
||||
<div class="item-cart hide">
|
||||
<div id="item-spinner">
|
||||
<span style="display: inline-block">
|
||||
<div class="input-group number-spinner">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="dwn">
|
||||
–</button>
|
||||
</span>
|
||||
<input class="form-control text-right cart-qty" value="1">
|
||||
<span class="input-group-btn">
|
||||
<button class="btn btn-default cart-btn" data-dir="up" style="margin-left:-2px;">
|
||||
+</button>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div id="item-add-to-cart">
|
||||
<button class="btn btn-primary btn-sm">
|
||||
{{ _("Add to Cart") }}</button>
|
||||
</div>
|
||||
<div id="item-update-cart" style="display: none;">
|
||||
<a href="/cart" class='btn btn-sm btn-default'>
|
||||
<i class='octicon octicon-check'></i>
|
||||
{{ _("View in Cart") }}</a>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div id="item-add-to-cart">
|
||||
<button class="btn btn-primary btn-sm">
|
||||
{{ _("Add to Cart") }}</button>
|
||||
</div>
|
||||
<div id="item-update-cart" style="display: none;">
|
||||
<a href="/cart" class='btn btn-sm btn-default'>
|
||||
<i class='octicon octicon-check'></i>
|
||||
{{ _("View in Cart") }}</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row item-website-description" style="margin-top:30px; margin-bottom:20px">
|
||||
<div class="col-md-12">
|
||||
<div class="h6 text-uppercase">{{ _("Description") }}</div>
|
||||
<div itemprop="description" class="item-desc">
|
||||
{{ web_long_description or description or _("No description given") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if website_specifications -%}
|
||||
<div class="row item-website-specification" style="margin-top: 40px">
|
||||
<div class="col-md-12">
|
||||
<div class="h6 text-uppercase">{{ _("Specifications") }}</div>
|
||||
|
||||
<table class="table borderless" style="width: 100%">
|
||||
{% for d in website_specifications -%}
|
||||
<tr>
|
||||
<td class="text-muted" style="width: 30%;">{{ d.label }}</td>
|
||||
<td>{{ d.description }}</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
<div class="row item-website-description margin-top">
|
||||
<div class="col-md-12">
|
||||
<div class="h6 text-uppercase">{{ _("Description") }}</div>
|
||||
<div itemprop="description" class="item-desc">
|
||||
{{ web_long_description or description or _("No description given") }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if website_specifications -%}
|
||||
<div class="row item-website-specification margin-top">
|
||||
<div class="col-md-12">
|
||||
<div class="h6 text-uppercase">{{ _("Specifications") }}</div>
|
||||
|
||||
<table class="table">
|
||||
{% for d in website_specifications -%}
|
||||
<tr>
|
||||
<td class="text-muted" style="width: 30%;">{{ d.label }}</td>
|
||||
<td>{{ d.description }}</td>
|
||||
</tr>
|
||||
{%- endfor %}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
{%- endif %}
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
|
||||
Reference in New Issue
Block a user