Nowy sposób prezentacji rabatów w profilu klienta w szablonie Szafir

W tym artykule dowiesz się, jak zmodyfikować szablon Szafir, aby obsługiwał nowy sposób prezentacji rabatów w profilu klienta.

Wskazówka

Do poprawnego działania potrzebujesz sklepu w wersji 2020.2 lub nowszej!

Wskazówka

Kopiowanie fraz, które należy wyszukać w kodzie, może powodować problemy. Frazy do wyszukania najlepiej przepisać ręcznie, lub skopiować, ale po skopiowaniu podmienić znaki typu – _ ’ „ itp. W przeciwnym wypadku, fraza może nie zostać odnaleziona w kodzie!

Wskazówka

W tym artykule trzeba będzie wprowadzać zmiany w plikach js i css. Z tego artykułu dowiesz się jak je minifikować

1. Otwórz plik common -> navigation-bars -> main-navigation-bar-partial.html. W pliku tym wyszukaj frazę {% if usr.Authenticated == true -%}. Trzy linie poniżej, powinna znajdować się linia zaczynająca się od <a href. Podmień tę linię na następującą:


<a href="{{config.DefinedPages.CustomerProfile.Url}}?tab=discounts">

2. Otwórz plik common -> pagination.html. Wyszukaj linię {% assign tab = 'loyalty’ -%}. Tuż pod nią wklej następujący kod:


{% elseif page.QueryString contains 'tab=discounts' -%}
    {% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}
    {% assign paginationPageCount = customer-profile.DiscountsERP.PageCount -%}
    {% assign paginationPageNo = customer-profile.DiscountsERP.PageNo -%}
    {% assign template = 'customer-profile/discounts/discounts-list.html' -%}
    {% assign templateContainer = '.discounts-list-lq' -%}
    {% assign tab = 'discounts' -%}
{% elseif page.QueryString contains 'tab=discount-details' -%}
    {% assign pageQueryName = customer-profile.DiscountDetPageQueryGET -%}
    {% assign paginationPageCount = customer-profile.DiscountERPDetails.PageCount -%}
    {% assign paginationPageNo = customer-profile.DiscountERPDetails.PageNo -%}
    {% assign template = 'customer-profile/discounts/discount-elements.html' -%}
    {% assign templateContainer = '.discount-elements-lq' -%}
    {% assign tab = 'discount-details' -%}
    {% assign id = customer-profile.DiscountERPDetails.Id -%}
    {% assign discountString = customer-profile.DiscountQueryGET -%}

{% elseif page.QueryString contains 'tab=discounts' -%}

{% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}

{% assign paginationPageCount = customer-profile.DiscountsERP.PageCount -%}

{% assign paginationPageNo = customer-profile.DiscountsERP.PageNo -%}

{% assign template = 'customer-profile/discounts/discounts-list.html' -%}

{% assign templateContainer = '.discounts-list-lq' -%}

{% assign tab = 'discounts' -%}

{% elseif page.QueryString contains 'tab=discount-details' -%}

{% assign pageQueryName = customer-profile.DiscountDetPageQueryGET -%}

{% assign paginationPageCount = customer-profile.DiscountERPDetails.PageCount -%}

{% assign paginationPageNo = customer-profile.DiscountERPDetails.PageNo -%}

{% assign template = 'customer-profile/discounts/discount-elements.html' -%}

{% assign templateContainer = '.discount-elements-lq' -%}

{% assign tab = 'discount-details' -%}

{% assign id = customer-profile.DiscountERPDetails.Id -%}

{% assign discountString = customer-profile.DiscountQueryGET -%}

3. Otwórz katalog customer-profile -> discounts. W nim otwórz plik discounts.html. Usuń jego treść, i wklej następujący kod:


<nav class="customer-profile-header-menu-ui">
    <ul>
        <li><a aria-label="homePage"  href="{{ page.BaseHref }}{{ config.DefinedPages.Home }}"><i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.BackToShopping }}</span></a></li>
        <li class="active-ui only-text-ui centered-ui mobile-ui">{{translations.Promotions}}</li>
    </ul>
</nav>

{% include 'customer-profile/menu.html' -%}

<div class="with-column-ui">
    <div class="container-ui">
        <h2>{{translations.DiscountsInfo}}</h2>
        <div class="discounts-list-lq container-lq" data-template="customer-profile/discounts/discount-details.html">
	    	{% include 'customer-profile/discounts/discounts-list.html' -%}
		</div>

<ul>

<li><a aria-label="homePage" href="{{ page.BaseHref }}{{ config.DefinedPages.Home }}"><i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.BackToShopping }}</span></a></li>

<li class="active-ui only-text-ui centered-ui mobile-ui">{{translations.Promotions}}</li>

</ul>

</nav>

{% include 'customer-profile/menu.html' -%}

<h2>{{translations.DiscountsInfo}}</h2>

{% include 'customer-profile/discounts/discounts-list.html' -%}

</div>

4. W tym samym katalogu utwórz plik discount-details.html. Wklej do niego następujący kod:


{% include 'common/date-format.html' -%}
{% assign discount = customer-profile.DiscountERPDetails -%}
{% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}
{% assign queries = page.QueryString | Split: '&' -%}
{% for query in queries -%}
    {% if query contains 'page=' -%}
        {% assign pageQueryNo = query | Split: '=' | Last -%}
        {% break -%}
    {% else -%}
        {% assign pageQueryNo = 1 -%}
    {% endif -%}
{% endfor -%}

<nav class="customer-profile-header-menu-ui deeper-lvl-ui">
    <ul>
        <li>
            <button class="load-first-lvl-lq parent-container-reload-lq" data-template="customer-profile/discounts/discounts.html" data-url="{{ page.Url }}?{{ pageQueryName }}={{ pageQueryNo }}&tab=discounts">
                <i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.Back }}</span>
            </button>
        </li>
        <li class="active-ui only-text-ui"><strong>{{ discount.Name }}</strong></li>
    </ul>
</nav>

{% if discount.Description != '' and discount.Description != null  -%}
    <div class="messages-container-lq messages-container-ui centered-ui">
        <div class="message-bar-ui" style="margin: 20px">
            {{discount.Description}}
        </div>
    </div>
{% endif -%}

{% if discount.Thresholds -%}
    {% for threshold in discount.Thresholds -%}
        <div class="narrow-container-ui" style="margin-top: 50px">
            <strong>{{translations.Threshold}}: </strong>
            {% if threshold.ThresholdType == 1 -%}
                {{threshold.Threshold | ToPrice}} {{threshold.ThresholdSymbol}}
            {% else -%}
                {{threshold.Threshold}}
            {% endif -%}
        </div>
        <div class="narrow-container-ui"><strong>{{translations.QuantityThreshold}}:</strong> {{threshold.ThresholdMinPositionsCount}}</div>
        <div class="products-list-ui cart-ui profile-order-ui discount-elements-lq" style="margin-top: 10px;">
            {% include 'customer-profile/discounts/discount-elements.html' with threshold -%}
        </div>
    {% endfor -%}
{% else -%}
    <div class="products-list-ui cart-ui profile-order-ui discount-elements-lq">
        {% include 'customer-profile/discounts/discount-elements.html' with discount -%}
    </div>
{% endif -%}

<div class="during-ajax-modal-lq during-ajax-modal-ui hidden-lq">
    <div class="loader-ui big-ui"></div>
</div>

{% include 'common/date-format.html' -%}

{% assign discount = customer-profile.DiscountERPDetails -%}

{% assign pageQueryName = customer-profile.DiscountsERP.PageQueryGET -%}

{% assign queries = page.QueryString | Split: '&' -%}

{% for query in queries -%}

{% if query contains 'page=' -%}

{% assign pageQueryNo = query | Split: '=' | Last -%}

{% break -%}

{% else -%}

{% assign pageQueryNo = 1 -%}

{% endif -%}

{% endfor -%}

<ul>

<li>

<i class="ti-angle-left"></i> <span class="no-on-mobile-ui">{{ translations.Back }}</span>

</button>

</li>

<li class="active-ui only-text-ui"><strong>{{ discount.Name }}</strong></li>

</ul>

</nav>

{% if discount.Description != '' and discount.Description != null -%}

</div>

{% endif -%}

{% if discount.Thresholds -%}

{% for threshold in discount.Thresholds -%}

<strong>{{translations.Threshold}}: </strong>

{% if threshold.ThresholdType == 1 -%}

{% else -%}

{% endif -%}

</div>

<div class="narrow-container-ui"><strong>{{translations.QuantityThreshold}}:</strong> {{threshold.ThresholdMinPositionsCount}}</div>

{% include 'customer-profile/discounts/discount-elements.html' with threshold -%}

</div>

{% endfor -%}

{% else -%}

{% include 'customer-profile/discounts/discount-elements.html' with discount -%}

</div>

{% endif -%}

</div>

5. W tym samym katalogu utwórz plik discount-elements.html i wklej do niego następujący kod:


{% assign discount = customer-profile.DiscountERPDetails -%}
{% if include -%}
	{% assign elementsParent = include -%}
{% else -%}
	{% assign elementsParent = discount -%}
{% endif -%}

<div class="div-table-ui full-ui discount-elements-table-lq">
    <div class="narrow-container-ui">
		{% assign anyGroup = false -%}
		{% assign anyProduct = false -%}
		{% assign anyThreshold = false -%}
		{% assign anyBundleThreshold = false -%}
		{% assign anyTotalPrice = false -%}
		{% assign anySubtotalPrice = false -%}
		{% for element in elementsParent.Elements -%}
			{% if element.Group != null -%}
				{% assign anyGroup = true -%}
			{% endif -%}
			{% if element.Product != null -%}
				{% assign anyProduct = true -%}
			{% endif -%}
			{% if element.Threshold != null and element.Threshold > 0 -%}
				{% assign anyThreshold = true -%}
			{% endif -%}
			{% if element.BundleThreshold != null and element.BundleThreshold > 0 -%}
				{% assign anyBundleThreshold = true -%}
			{% endif -%}
			{% if element.FixedPrice -%}
				{% if element.TotalPrice != null and element.TotalPrice > 0 -%}
					{% assign anyTotalPrice = true -%}
				{% endif -%}
				{% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%}
					{% assign anySubtotalPrice = true -%}
				{% endif -%}
			{% endif -%}
		{% endfor -%}
        <div class="table-header-ui div-table-row-ui products-table-header-lq attached-ui">
            <div class="narrow-container-ui vertically-centered-ui products-table-header-container-lq products-table-header-container-ui">
                <div class="div-table-cell-ui number-column-ui number-column-lq"></div>
                <div class="div-table-cell-ui name-and-code-ui name-and-code-lq">
                    {% if anyGroup and anyProduct -%}
                        {{translations.Product}}/{{translations.Category}}
                    {% elseif anyGroup -%}
                        {{translations.Category}}
                    {% else -%}
                        {{translations.Product}}
                    {% endif -%}
				</div>
				{% unless element.FixedPrice and anySubtotalPrice == false -%}
					<div class="div-table-cell-ui price-column-ui price-like-column-ui price-like-column-lq prices-view-lq">
						{% if element.FixedPrice and anySubtotalPrice -%}
							{{translations.Price}} {{translations.Netto | Downcase }}
						{% else -%}
							{{translations.Discount}}
						{% endif -%}
					</div>
                {% endunless -%}
                {% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
                    <div class="div-table-cell-ui total-price-column-ui price-like-column-ui price-like-column-lq prices-view-lq">
						{% if element.FixedPrice and anyTotalPrice -%}
							{{translations.Price}} {{translations.Brutto | Downcase}}
						{% elseif anyBundleThreshold -%}
							{{translations.BundleThreshold}}
						{% else -%}
							{{translations.Threshold}}
						{% endif -%}
                    </div>
                {% endif -%}
            </div>
        </div>
		{% for element in elementsParent.Elements -%}
            <div class="div-table-row-ui discount-element-ui cart-product-container-lq">
                <div class="div-table-cell-ui number-column-ui">
                    {{ forloop.index }}
                </div>
				<div class="div-table-cell-ui name-and-code-lq">
					<span class="product-name-ui">
						{% if element.Group != null -%}
							{% if element.Group.Url -%}
								<a href="{{ element.Group.Url }}">
							{% endif -%}
									{{ element.Group.Name }}
							{% if element.Group.Url -%}
								</a>
							{% endif -%}
						{% else -%}
							{% if element.Product.Url -%}
								<a href="{{ element.Product.Url }}">
							{% endif -%}
									{{ element.Product.NameNoHtml }}
							{% if element.Product.Url -%}
								</a>
							{% endif -%}
						{% endif -%}
					</span>
				</div>
				{% unless element.FixedPrice and anySubtotalPrice == false -%}
					<div class="div-table-cell-ui price-column-ui price-like-column-ui prices-view-lq">
						<span class="mobile-ui prices-ui">
							{% if element.FixedPrice -%}
								{% if element.SubtotalPrice > 0 -%}
									{{ translations.Price | Downcase }} {{ translations.Netto | Downcase }}
								{% endif -%}
							{% else -%}
								{{ translations.Discount | Downcase }}
							{% endif -%}
						</span> 
						<span class="value-ui">
							{% if element.FixedPrice -%}
								{% if element.SubtotalPrice > 0 -%}
									{{ element.SubtotalPrice | ToPrice }}
								{% endif -%}
							{% else -%}
								{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
									{{ element.Value | ToPrice }}
								{% else -%}
									{{ element.Value | Normalize }}
								{% endif -%}
							{% endif -%}
							{{ element.ValueSymbol }}
						</span>
					</div>
				{% endunless -%}
				{% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}
					<div class="div-table-cell-ui total-price-column-ui price-like-column-ui prices-view-lq">
						<span class="mobile-ui prices-ui">
							{% if element.FixedPrice -%}
								{% if element.TotalPrice > 0 -%}
									{{ translations.Price | Downcase }} {{ translations.Brutto | Downcase }}
								{% endif -%}
							{% elseif element.BundleThreshold > 0 -%}
								{{ translations.BundleThreshold | Downcase }}
							{% elseif element.Threshold > 0 -%}
								{{ translations.Threshold | Downcase }}
							{% endif -%}
						</span>
						<span class="value-ui">
							{% if element.FixedPrice -%}
								{% if element.TotalPrice > 0 -%}
									{{ element.TotalPrice | ToPrice }}
								{% endif -%}
								{{ element.ValueSymbol }}
							{% elseif element.BundleThreshold > 0 -%}
								{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
									{{ element.BundleThreshold | ToPrice }}
								{% else -%}
									{{ element.BundleThreshold | Normalize }}
								{% endif -%}
								{{ element.BundleThresholdSymbol }}
							{% elseif element.Threshold > 0 -%}
								{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}
									{{ element.Threshold | ToPrice }}
								{% else -%}
									{{ element.Threshold | Normalize }}
								{% endif -%}
								{{ element.ThresholdSymbol }}
							{% endif -%}
						</span>
					</div>
				{% endif -%}
            </div>
        {% endfor -%}
    </div>
	{% assign paginationPageCount = discount.PageCount -%}
	{% if paginationPageCount > 1 -%}
		<div class="tfoot-ui  with-pager-ui">
			<div class="narrow-container-ui vertically-centered-ui">
				<div class="f-right-ui">
					<div class="f-left-ui">
						{% include 'common/pagination.html' -%}
					</div>
				</div>
			</div>
		</div>
	{% endif -%}
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

{% assign discount = customer-profile.DiscountERPDetails -%}

{% if include -%}

{% assign elementsParent = include -%}

{% else -%}

{% assign elementsParent = discount -%}

{% endif -%}

{% assign anyGroup = false -%}

{% assign anyProduct = false -%}

{% assign anyThreshold = false -%}

{% assign anyBundleThreshold = false -%}

{% assign anyTotalPrice = false -%}

{% assign anySubtotalPrice = false -%}

{% for element in elementsParent.Elements -%}

{% if element.Group != null -%}

{% assign anyGroup = true -%}

{% endif -%}

{% if element.Product != null -%}

{% assign anyProduct = true -%}

{% endif -%}

{% if element.Threshold != null and element.Threshold > 0 -%}

{% assign anyThreshold = true -%}

{% endif -%}

{% if element.BundleThreshold != null and element.BundleThreshold > 0 -%}

{% assign anyBundleThreshold = true -%}

{% endif -%}

{% if element.FixedPrice -%}

{% if element.TotalPrice != null and element.TotalPrice > 0 -%}

{% assign anyTotalPrice = true -%}

{% endif -%}

{% if element.SubtotalPrice != null and element.SubtotalPrice > 0 -%}

{% assign anySubtotalPrice = true -%}

{% endif -%}

{% endfor -%}

{% if anyGroup and anyProduct -%}

{{translations.Product}}/{{translations.Category}}

{% elseif anyGroup -%}

{% else -%}

{% endif -%}

</div>

{% unless element.FixedPrice and anySubtotalPrice == false -%}

{% if element.FixedPrice and anySubtotalPrice -%}

{% else -%}

{% endif -%}

</div>

{% endunless -%}

{% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}

{% if element.FixedPrice and anyTotalPrice -%}

{% elseif anyBundleThreshold -%}

{% else -%}

{% endif -%}

</div>

{% endif -%}

</div>

{% for element in elementsParent.Elements -%}

</div>

{% if element.Group != null -%}

{% if element.Group.Url -%}

{% endif -%}

{% if element.Group.Url -%}

</a>

{% endif -%}

{% else -%}

{% if element.Product.Url -%}

{% endif -%}

{% if element.Product.Url -%}

</a>

{% endif -%}

</span>

</div>

{% unless element.FixedPrice and anySubtotalPrice == false -%}

{% if element.FixedPrice -%}

{% if element.SubtotalPrice > 0 -%}

{% endif -%}

{% else -%}

{% endif -%}

</span>

{% if element.FixedPrice -%}

{% if element.SubtotalPrice > 0 -%}

{% endif -%}

{% else -%}

{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}

{% else -%}

{% endif -%}

</span>

</div>

{% endunless -%}

{% if anyThreshold or anyBundleThreshold or anyTotalPrice -%}

{% if element.FixedPrice -%}

{% if element.TotalPrice > 0 -%}

{% endif -%}

{% elseif element.BundleThreshold > 0 -%}

{% elseif element.Threshold > 0 -%}

{% endif -%}

</span>

{% if element.FixedPrice -%}

{% if element.TotalPrice > 0 -%}

{% endif -%}

{% elseif element.BundleThreshold > 0 -%}

{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}

{% else -%}

{% endif -%}

{% elseif element.Threshold > 0 -%}

{% if element.Type == 1 or element.Type == 3 or element.Type == 9 -%}

{% else -%}

{% endif -%}

</span>

</div>

{% endif -%}

</div>

{% endfor -%}

</div>

{% assign paginationPageCount = discount.PageCount -%}

{% if paginationPageCount > 1 -%}

{% include 'common/pagination.html' -%}

</div>

{% endif -%}

</div>

6. W tym samym katalogu utwórz plik discounts-list.html i wklej do niego następujący kod:


{% include 'common/date-format.html' -%}

{% assign discountsERP = customer-profile.DiscountsERP -%}
{% assign discountString = customer-profile.DiscountQueryGET | H -%}
{% assign paginationPageNo = discountsERP.PageNo -%}

{% if paginationPageNo == 1 -%}
    {% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%}
    {% if orderValuesSize > 0 -%}
        {% assign anyDiscount = true -%}
        {% for orderValue in customer-profile.DiscountsEshop.OrderValue -%}
            <div class="discount-item-ui">
                <div class="discount-value-ui">{{ orderValue.Discount | Normalize }} %</div>
                <div class="discount-info-ui">
                    <div class="discount-name-ui">{{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }}</div>
                    <div class="discount-date-ui">
                        {% if orderValue.DateTill -%}
                            {{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }}
                        {% else -%}
                            {{ translations.ValidLifetime | Downcase }}
                        {% endif -%}
                    </div>
                </div>
            </div>
        {% endfor -%}
    {% endif -%}
    {% if customer-profile.DiscountsEshop.Regular -%}
        {% assign anyDiscount = true -%}
        {% assign regular = customer-profile.DiscountsEshop.Regular -%}
        <div class="discount-item-ui">
            <div class="discount-value-ui">{{ regular.Discount | Normalize }} %</div>
            <div class="discount-info-ui">
                <div class="discount-name-ui">{{ translations.ForRegularCustomer }}</div>
                <div class="discount-date-ui">
                    {% if regular.DateTill -%}
                        {{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                </div>
            </div>
        </div>
    {% endif -%}
    {% if customer-profile.DiscountsEshop.FirstOrder -%}
        {% assign anyDiscount = true -%}
        {% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%}
        <div class="discount-item-ui">
            <div class="discount-value-ui">{{ firstOrder.Discount | Normalize }} %</div>
            <div class="discount-info-ui">
                <div class="discount-name-ui">{{ translations.ForNewCustomer }}</div>
                <div class="discount-date-ui">
                    {% if firstOrder.DateTill -%}
                        {{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                </div>
            </div>
        </div>
    {% endif -%}
{% endif -%}
{% if discountsERP.TotalItems > 0 -%}
    {% assign anyDiscount = true -%}
    {% for discount in discountsERP.Discounts -%}
        <div class="discount-item-ui">
            <div class="discount-value-ui clickable-ui load-deeper-lvl-lq parent-container-reload-lq" data-id="{{ discount.Id }}" data-url="{{ page.Url }}?{{ discountString }}={{ discount.Id }}&deeper-lvl&tab=discount-details">
                {{ translations.Details }}
            </div>
            <div class="discount-info-ui">
                <div class="discount-name-ui">{{ discount.Name }}</div>
                <div class="discount-date-ui">
                    {% if discount.DateTill -%}
                        {% if discount.DateFrom -%}
                            <div>{{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}</div>
                        {% endif -%}
                        {{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }}
                    {% else -%}
                        {{ translations.ValidLifetime | Downcase }}
                    {% endif -%}
                </div>
            </div>
        </div>
    {% endfor -%}
    {% include 'common/pagination.html' -%}
{% endif -%}
{% unless anyDiscount -%}
    {{ translations.NoDicountsInfo }}
{% endunless -%}

{% include 'common/date-format.html' -%}

{% assign discountsERP = customer-profile.DiscountsERP -%}

{% assign discountString = customer-profile.DiscountQueryGET | H -%}

{% assign paginationPageNo = discountsERP.PageNo -%}

{% if paginationPageNo == 1 -%}

{% assign orderValuesSize = customer-profile.DiscountsEshop.OrderValue | Size -%}

{% if orderValuesSize > 0 -%}

{% assign anyDiscount = true -%}

{% for orderValue in customer-profile.DiscountsEshop.OrderValue -%}

<div class="discount-value-ui">{{ orderValue.Discount | Normalize }} %</div>

<div class="discount-name-ui">{{ orderValue.ValueFrom }} {{ customer.Currency }} - {{ orderValue.ValueTo }} {{ customer.Currency }}</div>

{% if orderValue.DateTill -%}

{{ translations.ValidTo | Downcase }}: {{ orderValue.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endfor -%}

{% endif -%}

{% if customer-profile.DiscountsEshop.Regular -%}

{% assign anyDiscount = true -%}

{% assign regular = customer-profile.DiscountsEshop.Regular -%}

<div class="discount-value-ui">{{ regular.Discount | Normalize }} %</div>

<div class="discount-name-ui">{{ translations.ForRegularCustomer }}</div>

{% if regular.DateTill -%}

{{ translations.ValidTo | Downcase }}: {{ regular.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endif -%}

{% if customer-profile.DiscountsEshop.FirstOrder -%}

{% assign anyDiscount = true -%}

{% assign firstOrder = customer-profile.DiscountsEshop.FirstOrder -%}

<div class="discount-value-ui">{{ firstOrder.Discount | Normalize }} %</div>

<div class="discount-name-ui">{{ translations.ForNewCustomer }}</div>

{% if firstOrder.DateTill -%}

{{ translations.ValidTo | Downcase }}: {{ firstOrder.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endif -%}

{% if discountsERP.TotalItems > 0 -%}

{% assign anyDiscount = true -%}

{% for discount in discountsERP.Discounts -%}

</div>

<div class="discount-name-ui">{{ discount.Name }}</div>

{% if discount.DateTill -%}

{% if discount.DateFrom -%}

<div>{{ translations.ValidFrom | Downcase }}: {{ discount.DateTill | Date:dateFormat }}</div>

{% endif -%}

{{ translations.ValidTo | Downcase }}: {{ discount.DateTill | Date:dateFormat }}

{% else -%}

{% endif -%}

</div>

{% endfor -%}

{% include 'common/pagination.html' -%}

{% endif -%}

{% unless anyDiscount -%}

{% endunless -%}

7. Następnie przejdź do katalogu customer-profile. Otwórz plik menu.html. Wyszukaj linię <ul class=”category-column-ui customer-profile-menu-ui category-column-lq attached-lq customer-profile-menu-lq” data-container=”.customer-profile-content-lq”>. Linia pod spodem zaczyna się od <li class=”load-erp-data-lq. Podmień ją na następującą:


<li class="load-erp-data-lq {% unless page.QueryString contains 'tab=invoices' or page.QueryString contains 'tab=executed-complaints' or page.QueryString contains 'tab=active-complaints' or page.QueryString contains 'tab=sor' or page.QueryString contains 'tab=wm' or page.QueryString == '?tab=discounts' -%} active-lq {% endunless -%}" data-template="customer-profile/orders/orders.html">

W tym samym pliku wyszukaj frazę {% if settings.discountsPresentationInCustomerProfileInPromotionsTab == 'yes’ %}. Linia pod spodem zaczyna się od <li class=”discounts-menu-button-lq”. Podmień ją na następującą:


<li class="discounts-menu-button-lq" data-template="customer-profile/discounts/discounts.html" data-url="{{config.DefinedPages.CustomerProfile.Url}}?tab=discounts">

8. Otwórz katalog js a w nim plik init-ui2.js. Wyszukaj linię function setProductNameMaxWidthInTable() {. Należy podmienić całą funkcję (od znalezionej linii włącznie, do linii o treści }; znajdującej się ok. 70 linii poniżej – 2 linie przed tą znajduje się linia $(’.products-table-header-container-lq .name-and-code-lq’).css(’width’, nameWidth);):


function setProductNameMaxWidthInTable() {
    if($(window).width() > 1279) {
        function calculateProductNameMaxWidthInTable(parent) {
            if(parent){
                var header = parent.find('.products-table-header-container-lq');
            } else {
                var header = $('.products-table-header-container-lq');
            }
            
            var headerWidth = header.width();
            var nameWidth = headerWidth;

            function calculateNameWidth(className) {
                var elements = header.find(className);
                var size = elements.length;
                if (size == 1) {
                    nameWidth -= elements.outerWidth();
                } else if (size > 1) {
                    elements.each(function () {
                        nameWidth -= $(this).outerWidth();
                    });
                }
            }

            calculateNameWidth('.remove-product-lq');
            calculateNameWidth('.open-complaint-form-container-lq');
            calculateNameWidth('.price-like-column-lq');
            calculateNameWidth('.percent-column-lq');
            calculateNameWidth('.amount-stepper-column-lq');
            calculateNameWidth('.currency-column-lq');
            calculateNameWidth('.options-column-lq');
            calculateNameWidth('.number-column-lq');

            if ($('.attributes-view-lq').index() != -1) {
                var freeSpaceWidth = headerWidth;

                function calculateFreeSpaceWidth(className) {
                    var elements = header.find(className);
                    var size = elements.length;
                    if(className == '.attributes-view-lq' && size > 5){
                        size = 5;
                    }
                    if (size == 1) {
                        freeSpaceWidth -= elements.outerWidth();
                    } else if (size > 1) {
                        elements.each(function (i) {
                            if(i < size){
                                freeSpaceWidth -= $(this).outerWidth();
                            } else {
                                return false;
                            }
                        });
                    }
                }

                calculateFreeSpaceWidth('.remove-product-lq');
                calculateFreeSpaceWidth('.open-complaint-form-container-lq');
                calculateFreeSpaceWidth('.attributes-view-lq');
                calculateFreeSpaceWidth('.arrow-lq');
                calculateFreeSpaceWidth('.options-column-lq');
                calculateFreeSpaceWidth('.name-column-lq');
                
                if (nameWidth > freeSpaceWidth) {
                    var difference = nameWidth - freeSpaceWidth;
                    var amountStepperWidth = $('.amount-stepper-column-lq').outerWidth() + difference;
                    $('.amount-stepper-column-ui').css('width', amountStepperWidth);
                    nameWidth = freeSpaceWidth;
                }
            }

            if(parent){
                parent.find('.name-and-code-lq').css('width', nameWidth);
            } else {
                $('.name-and-code-lq').css('width', nameWidth);
            }
            
            if ($('.choose-cart-table-view-lq').index() != -1) {
                nameWidth -= $('.choose-cart-table-view-lq').width();
            }

            if(parent){
                parent.find('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);
            } else {
                $('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);
            }
        };
        
        if($('.discount-elements-table-lq').index() != -1){
            $('.discount-elements-table-lq').each(function(){
                calculateProductNameMaxWidthInTable($(this));
            });
        } else {
            calculateProductNameMaxWidthInTable()
        }
    }
};

function setProductNameMaxWidthInTable() {

if($(window).width() > 1279) {

function calculateProductNameMaxWidthInTable(parent) {

if(parent){

var header = parent.find('.products-table-header-container-lq');

} else {

var header = $('.products-table-header-container-lq');

}

var headerWidth = header.width();

var nameWidth = headerWidth;

function calculateNameWidth(className) {

var elements = header.find(className);

var size = elements.length;

if (size == 1) {

nameWidth -= elements.outerWidth();

} else if (size > 1) {

elements.each(function () {

nameWidth -= $(this).outerWidth();

});

}

calculateNameWidth('.remove-product-lq');

calculateNameWidth('.open-complaint-form-container-lq');

calculateNameWidth('.price-like-column-lq');

calculateNameWidth('.percent-column-lq');

calculateNameWidth('.amount-stepper-column-lq');

calculateNameWidth('.currency-column-lq');

calculateNameWidth('.options-column-lq');

calculateNameWidth('.number-column-lq');

if ($('.attributes-view-lq').index() != -1) {

var freeSpaceWidth = headerWidth;

function calculateFreeSpaceWidth(className) {

var elements = header.find(className);

var size = elements.length;

if(className == '.attributes-view-lq' && size > 5){

size = 5;

}

if (size == 1) {

freeSpaceWidth -= elements.outerWidth();

} else if (size > 1) {

elements.each(function (i) {

if(i < size){

freeSpaceWidth -= $(this).outerWidth();

} else {

return false;

}

});

}

calculateFreeSpaceWidth('.remove-product-lq');

calculateFreeSpaceWidth('.open-complaint-form-container-lq');

calculateFreeSpaceWidth('.attributes-view-lq');

calculateFreeSpaceWidth('.arrow-lq');

calculateFreeSpaceWidth('.options-column-lq');

calculateFreeSpaceWidth('.name-column-lq');

if (nameWidth > freeSpaceWidth) {

var difference = nameWidth - freeSpaceWidth;

var amountStepperWidth = $('.amount-stepper-column-lq').outerWidth() + difference;

$('.amount-stepper-column-ui').css('width', amountStepperWidth);

nameWidth = freeSpaceWidth;

}

if(parent){

parent.find('.name-and-code-lq').css('width', nameWidth);

} else {

$('.name-and-code-lq').css('width', nameWidth);

}

if ($('.choose-cart-table-view-lq').index() != -1) {

nameWidth -= $('.choose-cart-table-view-lq').width();

}

if(parent){

parent.find('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);

} else {

$('.products-table-header-container-lq .name-and-code-lq').css('width', nameWidth);

}

};

if($('.discount-elements-table-lq').index() != -1){

$('.discount-elements-table-lq').each(function(){

calculateProductNameMaxWidthInTable($(this));

});

} else {

calculateProductNameMaxWidthInTable()

}

};

9. Otwórz plik scss -> globals -> _globals-m.scss. Wyszukaj frazę .position-attributes-set-form-lq{. Poniżej znajdują się dwie linie o treści }. Tuż pod nimi wklej poniższy kod:


        &.discount-element-ui{
          height: 100px;
          .name-and-code-lq{
            margin-top: 4px;
          }
          .price-like-column-ui{
            left: 60px;
            text-align: left;
            .prices-ui{
              left: 0;
            }
          }
          .value-ui{
            position: absolute;
            left: 40px;
            font-size: 10px;
            top: 2px;
          }
        }

&.discount-element-ui{

height: 100px;

.name-and-code-lq{

margin-top: 4px;

}

.price-like-column-ui{

left: 60px;

text-align: left;

.prices-ui{

left: 0;

}

.value-ui{

position: absolute;

left: 40px;

font-size: 10px;

top: 2px;

}

W tym samym katalogu otwórz plik _globals2.scss. Wyszukaj linię // Discounts in customer-profile. Poniżej znajduje się linia .discount-item-ui{. Tuż pod nią wklej poniższą linijkę:


  height: 72px;

height: 72px;

Poniżej znajduje się linia .discount-value-ui{. Klika linii poniżej znajdziesz linię o treści vertical-align: middle;. Słowo middle zamień na top.

Kolejne kilka linii poniżej znajduje się linia o treści .currency-ui{. Tuż nad nią wklej ten kod:


  &.clickable-ui{
    cursor: pointer;
  }

&.clickable-ui{

cursor: pointer;

}

10. Otwórz Panel administracyjny, a w nim zakładkę Wygląd sklepu -> Ustawienia -> Tłumaczenia. Nowe tłumaczenia dodaj poprzez kliknięcie przycisku Dodaj, wprowadzenie Id, Tekstu i zatwierdzenie przyciskiem Dodaj. Należy dodać następujące tłumaczenia (Id – Tekst):
1. Threshold – Próg
2. QuantityThreshold – Próg ilościowy
3. BundleThreshold – Próg pakietowy

Wskazówka

Kopiując Id tłumaczeń upewnij się, że przed lub za danym Id nie znajduje się żadna spacja, inaczej tłumaczenie może nie zadziałać w sposób poprawny!

Wskazówka

Pamiętaj, aby po wprowadzeniu zmian w plikach scss i js, wykonać odpowiednie komendy opisane w artykule o minifikacji, do którego link znajduje się na samej górze niniejszego artykułu. Przed wykonaniem odpowiedniej komendy dla plików js, usuń z katalogu js pliki: init-ui1.min.js, collection-points.min.js, init-ui2.min.js, init.min.js, sw.min.js. Po wykonaniu komendy możesz usunąć plik slick.min.min.js.

Nowy sposób prezentacji rabatów w profilu klienta w szablonie Szafir

Nowy sposób prezentacji rabatów w profilu klienta w szablonie Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt