Dodanie nowego widoku filtrów

Szablon Szafir umożliwia dodanie w nim nowego widoku filtrów oraz modyfikowację ustawienia szablonu, aby był bardziej czytelny. Zmiany wyglądu dotyczą opisu danej kategorii i graficznych odnośników do podkategorii.

Wskazówka

W tym artykule dowiesz się jak wprowadzać zmiany w plikach js i scss. Dodatkowe informacje o kompilacji i minifikacji znajdziesz w centrum pomocy.

Szafir

W pliku __settings.liquid dodaj poniżesze tłumaczenia:


{% assign productsList = "Lista towarów" -%}
{% assign filterPanel = "Panel filtra" -%}
{% assign filterPanelView = "Widok panelu filtra" -%}
{% assign filterPanelViewOption1 = "Po lewej pod menu kategorii" -%}
{% assign filterPanelViewOption2 = "U góry nad listą towarów" -%}
{% assign defaultSection = "Sekcja domyślnie" -%}
{% assign closed = "Zwinięta" -%}
{% assign opened = "Rozwinięta" -%}
{% assign graphMenu = "Graficzne menu" -%}
{% assign graphMenuInfo = "Dodatkowe, graficzne menu nawigacji do podgrup" -%}
{% assign category = "Kategoria" -%}
{% assign nameGraphDescCategory = "Nazwa, grafika i opis kategorii" -%}
{% assign overProductsList = "Nad listą towarów" -%}
{% assign underProductsList = "Pod listą towarów" -%}
{% assign graphFormOfNameDescImgCategory = "Forma graficzna prezentowania nazwy, opisu i zdjęcia kategorii" -%}
{% assign backgroundImage = "Zdjęcie w tle" -%}
{% assign leftImage = "Zdjęcie po lewej" -%}

{% assign productsList = "Lista towarów" -%}

{% assign filterPanel = "Panel filtra" -%}

{% assign filterPanelView = "Widok panelu filtra" -%}

{% assign filterPanelViewOption1 = "Po lewej pod menu kategorii" -%}

{% assign filterPanelViewOption2 = "U góry nad listą towarów" -%}

{% assign defaultSection = "Sekcja domyślnie" -%}

{% assign closed = "Zwinięta" -%}

{% assign opened = "Rozwinięta" -%}

{% assign graphMenu = "Graficzne menu" -%}

{% assign graphMenuInfo = "Dodatkowe, graficzne menu nawigacji do podgrup" -%}

{% assign category = "Kategoria" -%}

{% assign nameGraphDescCategory = "Nazwa, grafika i opis kategorii" -%}

{% assign overProductsList = "Nad listą towarów" -%}

{% assign underProductsList = "Pod listą towarów" -%}

{% assign graphFormOfNameDescImgCategory = "Forma graficzna prezentowania nazwy, opisu i zdjęcia kategorii" -%}

{% assign backgroundImage = "Zdjęcie w tle" -%}

{% assign leftImage = "Zdjęcie po lewej" -%}

W tym samym pliku wyszukaj frazę id=”tab1″ i linijkę niżej wklej:


<a href="#" id="tab2">{{productsList}}</a>

<a href="#" id="tab2">{{productsList}}</a>

Teraz wyszukaj frazę:


<script>

Tuż nad nią będzie znak zamknięcia kontenera. Linijkę wyżej wklej poniższy kod:


<div id="tab2Content">
<fieldset>
	<legend>{{filterIcons}}</legend>

	<section class='filter-options'>
		<h3 class='section-title'>{{FilterValuesAmount}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name='maxfilter' value='3' id="filter-options-length-3" {% if settings.maxfilter == 3 %} checked {% endif %}/>
					<label class="label" for="filter-options-length-3">3</label>
				</div>

				<div class="tcell">
					<input type="radio" name='maxfilter' value='5' id="filter-options-length-5" {% if settings.maxfilter == 5 %} checked {% endif %}/>
					<label class="label" for="filter-options-length-5">5</label>
				</div>

				<div class="tcell">
					<input type="radio" name='maxfilter' value='8' id="filter-options-length-8" {% if settings.maxfilter == 8 %} checked {% endif %}/>
					<label class="label" for="filter-options-length-8">8</label>
				</div>
			</div>
		</div>
	</section>

	<section>
		<h3 class='section-title'>{{filterPanelView}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="filterPanelView" value="up" id="filterPanelView-up" {% if settings.filterPanelView == "up" %} checked {% endif %}/>
					<label class="label" for="filterPanelView-up">{{filterPanelViewOption2}}</label>
				</div>
				<div class="tcell longer">
					<input type="radio" name="filterPanelView" value="left" id="filterPanelView-left" {% if settings.filterPanelView == "left" %} checked {% endif %}/>
					<label class="label" for="filterPanelView-left">{{filterPanelViewOption1}}</label>
				</div>
			</div>
		</div>
	</section>

	<section class="upFilterPanelViewOpenedClosedSection">
		<h3 class='section-title'>{{defaultSection}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="upFilterPanelView" value="closed" id="upFilterPanelView-closed" {% if settings.upFilterPanelView == "closed" %} checked {% endif %}/>
					<label class="label" for="upFilterPanelView-closed">{{closed}}</label>
				</div>
				<div class="tcell longer">
					<input type="radio" name="upFilterPanelView" value="opened" id="upFilterPanelView-opened" {% if settings.upFilterPanelView == "opened" %} checked {% endif %}/>
					<label class="label" for="upFilterPanelView-opened">{{opened}}</label>
				</div>
			</div>
		</div>
	</section>

	<section class="leftFilterPanelViewOpenedClosedSection">
		<h3 class='section-title'>{{whatOpened}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="toggleFilters" value='2' id="default-filters-opened" {% if settings.toggleFilters == 2 %} checked {% endif %}/>
					<label class="label" for="default-filters-opened">{{choosenFiltersOpened}}</label>
				</div>

				<div class="tcell">
					<input type="radio" name="toggleFilters" value='1' id="all-filters-opened" {% if settings.toggleFilters == 0 %} checked {% endif %}/>
					<label class="label" for="all-filters-opened">{{allFiltersOpened}}</label>
				</div>

				<div class="tcell">
					<input type="radio" name="toggleFilters" value='0' id="all-filters-closed" {% if settings.toggleFilters == 1 %} checked {% endif %}/>
					<label class="label" for="all-filters-closed">{{allFiltersClosed}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>
<fieldset>
	<legend>{{category}}</legend>

	<section>
		<h3 class="section-title">{{nameGraphDescCategory}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="nameGraphDescCategory" value="up" id="nameGraphDescCategory-up" {% if settings.nameGraphDescCategory == "up" %} checked {% endif %}/>
					<label class="label" for="nameGraphDescCategory-up">{{overProductsList}}</label>
				</div>
				<div class="tcell">
					<input type="radio" name="nameGraphDescCategory" value="down" id="nameGraphDescCategory-down" {% if settings.nameGraphDescCategory == "down" %} checked {% endif %}/>
					<label class="label" for="nameGraphDescCategory-down">{{underProductsList}}</label>
				</div>
			</div>
		</div>
	</section>

	<section>
		<h3 class="section-title">{{graphFormOfNameDescImgCategory}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="graphFormOfNameDescImgCategory" value="background" id="graphFormOfNameDescImgCategory-background" {% if settings.graphFormOfNameDescImgCategory == "background" %} checked {% endif %}/>
					<label class="label" for="graphFormOfNameDescImgCategory-background">{{backgroundImage}}</label>
				</div>
				<div class="tcell">
					<input type="radio" name="graphFormOfNameDescImgCategory" value="left" id="graphFormOfNameDescImgCategory-left" {% if settings.graphFormOfNameDescImgCategory == "left" %} checked {% endif %}/>
					<label class="label" for="graphFormOfNameDescImgCategory-left">{{leftImage}}</label>
				</div>
			</div>
		</div>
	</section>

	<section>
		<h3 class="section-title">{{defaultSection}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="categoryOpenedClosed" value="closed" id="categoryOpenedClosed-closed" {% if settings.categoryOpenedClosed == "closed" %} checked {% endif %}/>
					<label class="label" for="categoryOpenedClosed-closed">{{closed}}</label>
				</div>
				<div class="tcell longer">
					<input type="radio" name="categoryOpenedClosed" value="opened" id="categoryOpenedClosed-opened" {% if settings.categoryOpenedClosed == "opened" %} checked {% endif %}/>
					<label class="label" for="categoryOpenedClosed-opened">{{opened}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>
<fieldset>
	<legend>{{defaultProductsView}}</legend>

	<section>
		<h3 class="section-title">{{desktop}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="selectedViewNameDesktop" value="quick-shopping" id="quick-shopping-list-desktop" {% if settings.selectedViewNameDesktop == "quick-shopping" %} checked {% endif %}/>
					<label class="label" for="quick-shopping-list-desktop">{{quickShoppingView}}</label>
				</div>					
					
				<div class="tcell">	
					<input type="radio" name="selectedViewNameDesktop" value="list" id="list-view-desktop" {% if settings.selectedViewNameDesktop == "list" %} checked {% endif %}/>
					<label class="label" for="list-view-desktop">{{ListView}}</label>
				</div>

				<div class="tcell">	
					<input type="radio" name="selectedViewNameDesktop" value="grid" id="gallery-view-desktop" {% if settings.selectedViewNameDesktop == "grid" %} checked {% endif %}/>
					<label class="label" for="gallery-view-desktop">{{GridView}}</label>
				</div>
			</div>
		</div>
	</section>

	<section>
		<h3 class="section-title">{{mobile}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="selectedViewNameMobile" value="quick-shopping" id="quick-shopping-list-mobile" {% if settings.selectedViewNameMobile == "quick-shopping" %} checked {% endif %}/>
					<label class="label" for="quick-shopping-list-mobile">{{quickShoppingView}}</label>
				</div>					
					
				<div class="tcell">	
					<input type="radio" name="selectedViewNameMobile" value="list" id="list-view-mobile" {% if settings.selectedViewNameMobile == "list" %} checked {% endif %}/>
					<label class="label" for="list-view-mobile">{{ListView}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>
<fieldset>
	<legend>{{colorFilter}}</legend>

	<section>
		<h3 class='section-title'>{{colorFilterInfo}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name='graphicColorFilter' value='yes' id="graphicColorFilter-yes" {% if settings.graphicColorFilter == 'yes' %} checked {% endif %}/>
					<label class="label" for="graphicColorFilter-yes">{{yesTranslation}}</label>
				</div>

				<div class="tcell">
					<input type="radio" name='graphicColorFilter' value='no' id="graphicColorFilter-no" {% if settings.graphicColorFilter == 'no' %} checked {% endif %}/>
					<label class="label" for="graphicColorFilter-no">{{noTranslation}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>
<fieldset>
	<legend>{{shortDesc}}</legend>

	<section>
		<h3 class='section-title'>{{shortDescInfo}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name='showShortDesc' value='yes' id="showShortDesc-yes" {% if settings.showShortDesc == 'yes' %} checked {% endif %}/>
					<label class="label" for="showShortDesc-yes">{{yesTranslation}}</label>
				</div>

				<div class="tcell longer">
					<input type="radio" name='showShortDesc' value='no' id="showShortDesc-no" {% if settings.showShortDesc == 'no' %} checked {% endif %}/>
					<label class="label" for="showShortDesc-no">{{noTranslation}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>
<fieldset>
	<legend>{{attributesOnProductsPage}}</legend>

	<section>
		<h3 class="section-title">{{showAttributesOnProductsPage}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="showAttributesOnProductsPage" value="yes" id="showAttributesOnProductsPage-yes" {% if settings.showAttributesOnProductsPage == "yes" %} checked {% endif %}/>
					<label class="label" for="showAttributesOnProductsPage-yes">{{yesTranslation}}</label>
				</div>

				<div class="tcell">
					<input type="radio" name="showAttributesOnProductsPage" value="no" id="showAttributesOnProductsPage-no" {% if settings.showAttributesOnProductsPage == "no" %} checked {% endif %}/>
					<label class="label" for="showAttributesOnProductsPage-no">{{noTranslation}}</label>
				</div>
			</div>
		</div>
	</section>

	<div class="attributesQuantitySections">
		<section>
			<h3 class="section-title">{{attributesQuantityOnQuickView}}</h3>

			<div class="table">
				<div class="trow">
					<div class="tcell">
						<input type="number" name="attributesQuantityOnQuickView" value="{{settings.attributesQuantityOnQuickView}}" style="width: 40px; margin-top: 13px;" min="0" />
					</div>

					<div class="tcell">
						<input type="checkbox" name="showAllAttributesOnQuickView" id="showAllAttributesOnQuickView" value="true" {% if settings.showAllAttributesOnQuickView == 'true' %} checked {% endif %}/>
						<label class="label" for="showAllAttributesOnQuickView">{{all}}</label>
					</div>
				</div>
			</div>
		</section>

		<section>
			<h3 class="section-title">{{attributesQuantityOnListView}}</h3>

			<div class="table">
				<div class="trow">
					<div class="tcell">
						<input type="number" name="attributesQuantityOnListView" value="{{settings.attributesQuantityOnListView}}" style="width: 40px; margin-top: 13px;" min="0" />
					</div>

					<div class="tcell">
						<input type="checkbox" name="showAllAttributesOnListView" id="showAllAttributesOnListView" value="true" {% if settings.showAllAttributesOnListView == 'true' %} checked {% endif %}/>
						<label class="label" for="showAllAttributesOnListView">{{all}}</label>
					</div>
				</div>
			</div>
		</section>

		<section>
			<h3 class="section-title">{{attributesQuantityOnGridView}}</h3>

			<div class="table">
				<div class="trow">
					<div class="tcell">
						<input type="number" name="attributesQuantityOnGridView" value="{{settings.attributesQuantityOnGridView}}" style="width: 40px; margin-top: 13px;" min="0" />
					</div>

					<div class="tcell">
						<input type="checkbox" name="showAllAttributesOnGridView" id="showAllAttributesOnGridView" value="true" {% if settings.showAllAttributesOnGridView == 'true' %} checked {% endif %}/>
						<label class="label" for="showAllAttributesOnGridView">{{all}}</label>
					</div>
				</div>
			</div>
		</section>
	</div>
</fieldset>
<fieldset>
	<legend>{{multiVariantProducts}}</legend>

	<section>
		<h3 class='section-title'>{{multiVariantProductsInfo}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="allowAddingToCartMultiVariantProductsOnProductsList" value="yes" id="allowAddingToCartMultiVariantProductsOnProductsList-yes" {% if settings.allowAddingToCartMultiVariantProductsOnProductsList == "yes" %} checked {% endif %}/>
					<label class="label" for="allowAddingToCartMultiVariantProductsOnProductsList-yes">{{yesTranslation}}</label>
				</div>

				<div class="tcell">
					<input type="radio" name="allowAddingToCartMultiVariantProductsOnProductsList" value="no" id="allowAddingToCartMultiVariantProductsOnProductsList-no" {% if settings.allowAddingToCartMultiVariantProductsOnProductsList == "no" %} checked {% endif %}/>
					<label class="label" for="allowAddingToCartMultiVariantProductsOnProductsList-no">{{noTranslation}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>
<fieldset>
	<legend>{{graphMenu}}</legend>

	<section>
		<h3 class="section-title">{{graphMenuInfo}}</h3>

		<div class="table">
			<div class="trow">
				<div class="tcell">
					<input type="radio" name="graphMenu" value="yes" id="graphMenu-yes" {% if settings.graphMenu == "yes" %} checked {% endif %}/>
					<label class="label" for="graphMenu-yes">{{yesTranslation}}</label>
				</div>

				<div class="tcell">
					<input type="radio" name="graphMenu" value="no" id="graphMenu-no" {% if settings.graphMenu == "no" %} checked {% endif %}/>
					<label class="label" for="graphMenu-no">{{noTranslation}}</label>
				</div>
			</div>
		</div>
	</section>
</fieldset>
</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

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

<legend>{{filterIcons}}</legend>

<h3 class='section-title'>{{FilterValuesAmount}}</h3>

</div>

</div>

</div>

</section>

<h3 class='section-title'>{{filterPanelView}}</h3>

<label class="label" for="filterPanelView-up">{{filterPanelViewOption2}}</label>

</div>

<label class="label" for="filterPanelView-left">{{filterPanelViewOption1}}</label>

</div>

</section>

<h3 class='section-title'>{{defaultSection}}</h3>

<label class="label" for="upFilterPanelView-closed">{{closed}}</label>

</div>

<label class="label" for="upFilterPanelView-opened">{{opened}}</label>

</div>

</section>

<h3 class='section-title'>{{whatOpened}}</h3>

<label class="label" for="default-filters-opened">{{choosenFiltersOpened}}</label>

</div>

<label class="label" for="all-filters-opened">{{allFiltersOpened}}</label>

</div>

<label class="label" for="all-filters-closed">{{allFiltersClosed}}</label>

</div>

</section>

</fieldset>

<legend>{{category}}</legend>

<h3 class="section-title">{{nameGraphDescCategory}}</h3>

<label class="label" for="nameGraphDescCategory-up">{{overProductsList}}</label>

</div>

<label class="label" for="nameGraphDescCategory-down">{{underProductsList}}</label>

</div>

</section>

<h3 class="section-title">{{graphFormOfNameDescImgCategory}}</h3>

<label class="label" for="graphFormOfNameDescImgCategory-background">{{backgroundImage}}</label>

</div>

<label class="label" for="graphFormOfNameDescImgCategory-left">{{leftImage}}</label>

</div>

</section>

<h3 class="section-title">{{defaultSection}}</h3>

<label class="label" for="categoryOpenedClosed-closed">{{closed}}</label>

</div>

<label class="label" for="categoryOpenedClosed-opened">{{opened}}</label>

</div>

</section>

</fieldset>

<legend>{{defaultProductsView}}</legend>

<h3 class="section-title">{{desktop}}</h3>

<label class="label" for="quick-shopping-list-desktop">{{quickShoppingView}}</label>

</div>

<label class="label" for="list-view-desktop">{{ListView}}</label>

</div>

<label class="label" for="gallery-view-desktop">{{GridView}}</label>

</div>

</section>

<h3 class="section-title">{{mobile}}</h3>

<label class="label" for="quick-shopping-list-mobile">{{quickShoppingView}}</label>

</div>

<label class="label" for="list-view-mobile">{{ListView}}</label>

</div>

</section>

</fieldset>

<legend>{{colorFilter}}</legend>

<h3 class='section-title'>{{colorFilterInfo}}</h3>

<label class="label" for="graphicColorFilter-yes">{{yesTranslation}}</label>

</div>

<label class="label" for="graphicColorFilter-no">{{noTranslation}}</label>

</div>

</section>

</fieldset>

<legend>{{shortDesc}}</legend>

<h3 class='section-title'>{{shortDescInfo}}</h3>

<label class="label" for="showShortDesc-yes">{{yesTranslation}}</label>

</div>

<label class="label" for="showShortDesc-no">{{noTranslation}}</label>

</div>

</section>

</fieldset>

<legend>{{attributesOnProductsPage}}</legend>

<h3 class="section-title">{{showAttributesOnProductsPage}}</h3>

<label class="label" for="showAttributesOnProductsPage-yes">{{yesTranslation}}</label>

</div>

<label class="label" for="showAttributesOnProductsPage-no">{{noTranslation}}</label>

</div>

</section>

<h3 class="section-title">{{attributesQuantityOnQuickView}}</h3>

</div>

</div>

</section>

<h3 class="section-title">{{attributesQuantityOnListView}}</h3>

</div>

</div>

</section>

<h3 class="section-title">{{attributesQuantityOnGridView}}</h3>

</div>

</div>

</section>

</div>

</fieldset>

<legend>{{multiVariantProducts}}</legend>

<h3 class='section-title'>{{multiVariantProductsInfo}}</h3>

<label class="label" for="allowAddingToCartMultiVariantProductsOnProductsList-yes">{{yesTranslation}}</label>

</div>

<label class="label" for="allowAddingToCartMultiVariantProductsOnProductsList-no">{{noTranslation}}</label>

</div>

</section>

</fieldset>

<legend>{{graphMenu}}</legend>

<h3 class="section-title">{{graphMenuInfo}}</h3>

<label class="label" for="graphMenu-yes">{{yesTranslation}}</label>

</div>

<label class="label" for="graphMenu-no">{{noTranslation}}</label>

</div>

</section>

</fieldset>

</div>

Wraz z nowymi sekcjami ustawień wkleiliśmy tu też kilka starych, które odnoszą się do Listy Towarów. Aby zapobiec duplikacji należy je wyszukać w kodzie w kontenerze oznaczonym jako tab0Content i usunąć. Następnym krokiem będzie wyszukanie znacznika


<script>

oraz wklejenie w jego obrębie kodu:


	if($('#filterPanelView-up').prop('checked')){
		$('.upFilterPanelViewOpenedClosedSection').show();
	} else {
		$('.upFilterPanelViewOpenedClosedSection').hide();
	}

	if($('#filterPanelView-left').prop('checked')){
		$('.leftFilterPanelViewOpenedClosedSection').show();
	} else {
		$('.leftFilterPanelViewOpenedClosedSection').hide();
	}

	$('[name=filterPanelView]').on('change', function(){
		if($('#filterPanelView-up').prop('checked')){
			$('.upFilterPanelViewOpenedClosedSection').show();
		} else {
			$('.upFilterPanelViewOpenedClosedSection').hide();
		}
		if($('#filterPanelView-left').prop('checked')){
			$('.leftFilterPanelViewOpenedClosedSection').show();
		} else {
			$('.leftFilterPanelViewOpenedClosedSection').hide();
		}
	});

if($('#filterPanelView-up').prop('checked')){

$('.upFilterPanelViewOpenedClosedSection').show();

} else {

$('.upFilterPanelViewOpenedClosedSection').hide();

}

if($('#filterPanelView-left').prop('checked')){

$('.leftFilterPanelViewOpenedClosedSection').show();

} else {

$('.leftFilterPanelViewOpenedClosedSection').hide();

}

$('[name=filterPanelView]').on('change', function(){

if($('#filterPanelView-up').prop('checked')){

$('.upFilterPanelViewOpenedClosedSection').show();

} else {

$('.upFilterPanelViewOpenedClosedSection').hide();

}

if($('#filterPanelView-left').prop('checked')){

$('.leftFilterPanelViewOpenedClosedSection').show();

} else {

$('.leftFilterPanelViewOpenedClosedSection').hide();

}

});

Kolejne dwie zmiany dotyczą plików products.html oraz products/product-filters.html. W obu tych plikach zachodzi bardzo dużo zmian dlatego zalecamy podmianę całej zawartości obu plików poniższym kodem:
products.html


{% extends '_layout.html' -%}
{% block pageContent -%}

{% assign whatPrice = translations.Brutto | Downcase -%}

{% if customer.Cart.SubtotalPrices -%}
    {% assign whatPrice = translations.Netto | Downcase -%}
{% endif -%}

{% assign viewDesktop = 'quick-shopping' -%}
{% assign viewMobile = 'quick-shopping' -%}

{% if settings.selectedViewNameDesktop -%}
    {% assign viewDesktop = settings.selectedViewNameDesktop -%}
{% endif -%}

{% if page.Cookies.selectedViewNameDesktop -%}
    {% assign viewDesktop = page.Cookies.selectedViewNameDesktop -%}
{% endif -%}

{% if settings.selectedViewNameMobile -%}
    {% assign viewMobile = settings.selectedViewNameMobile -%}
{% endif -%}

{% if page.Cookies.selectedViewNameMobile -%}
    {% assign viewMobile = page.Cookies.selectedViewNameMobile -%}
{% endif -%}

{% assign view = viewMobile -%}

<div class="container-ui products-page-lq {% if settings.filterPanelView == 'left' -%} no-category-ui {% endif -%} {% if settings.nameGraphDescCategory == 'down' %} graph-desc-category-down-ui {% endif %} {% if settings.filterPanelView == 'up' -%} filters-up-main-container-ui {% endif -%}">
    <header class="products-navigation-ui clear-after-ui flex-ui {% if page.GroupId == null and products.Search == null -%} no-on-mobile-ui {% elseif products.TotalItems == 0 -%} no-items-mobile-ui  {% endif -%} {% if settings.filterPanelView == 'up' -%} filters-up-ui filters-up-lq expandable-mechanism-container-lq {% endif -%}">
        <div class="f-left-ui breadcrumbs-container-ui">
            {% include 'common/breadcrumbs.html' -%}
        </div>
        {% if products.FilteringOptions -%}
            <div class="sorting-views-container-ui f-right-ui clear-after-ui">
                {% if settings.filterPanelView == 'left' -%}
                    <div class="btn-pure-ui f-left-ui filter-mobile-ui toggle-filter-mobile-lq">
                        <i class="ti-filter va-mid-ui line-height-1-ui"></i>
                        <span class="va-mid-ui line-height-1-ui">{{translations.Filter}}</span>
                        {% if activeFiltersQuantity > 0 -%}
                            <span class="counter-bg-ui"><span class="counter-ui">{{activeFiltersQuantity}}</span></span>
                        {% endif -%}
                    </div>
                {% else -%}
                    {% assign filtersOpened = false -%} 
                    {% if settings.filterPanelView == 'up' -%}
                        {% if products.FilteringOptions.Results or settings.upFilterPanelView == 'opened' -%} 
                            {% assign filtersOpened = true -%} 
                        {% endif -%}
                    {% endif -%}
                    {% assign fo = products.FilteringOptions -%}
                    {% assign selectedQuantity = 0 -%}
                    {% for filter in fo.Filters -%}
                        {% unless filter.Field == 'MARK' and config.Reviews.Enabled == false -%}
                            {% for value in filter.Values -%}
                                {% if value.Selected -%}
                                    {% assign selectedQuantity = selectedQuantity | Plus: 1 -%}
                                {% endif -%}
                            {% endfor -%}
                        {% endunless -%}
                    {% endfor -%}
                    <div class="sorting-options-ui f-left-ui basic-dropdown-ui wa-ui">
                        <button class="toggle-filters-button-ui toggle-filters-button-lq btn-pure-ui expand-data-lq dropdown-trigger-ui {% if selectedQuantity > 0 -%} with-quantity-ui {% endif -%} {% if filtersOpened -%} expanded-lq {% endif -%}">
                            <span class="sorting-label-ui">
                                <i class="ti-filter sorting-options-icon-ui"></i>
                                <span class="filters-label-lq {% if filtersOpened -%} hidden-lq {% endif -%}">{{translations.Filter}}</span>
                                <span class="filters-label-lq {% if filtersOpened == false -%} hidden-lq {% endif -%}">{{translations.CloseFilters}}</span>
                            </span>
                        </button>
                        {% if selectedQuantity > 0 -%}
                            <span class="active-sorting-option-ui block-ui">{{selectedQuantity}}</span>
                        {% endif -%}
                    </div>
                {% endif -%}
                {% if products.TotalItems != 0 -%}
                    <div class="sorting-options-ui f-left-ui basic-dropdown-ui">
                        <button class="btn-pure-ui open-dropdown-lq dropdown-trigger-ui">
                            <span class="sorting-label-ui">
                                <i class="ti-arrow-down sorting-options-icon-ui"></i>
                                <span class="desktop-ui">{{ translations.Sorting }}</span>
                                <span class="mobile-ui">
                                    {% assign activeSortingOption = -1 -%}
                                    {% for sortingType in products.SortingOptions -%}
                                        {% if sortingType.Value == products.SelectedSorting -%}
                                            {% assign activeSortingOption = sortingType.Text -%}
                                        {% endif -%}
                                    {% endfor -%}
                                    {% if activeSortingOption != -1 -%}
                                        {{ activeSortingOption }}
                                    {% else -%}
                                        {{ translations.Sorting }}
                                    {% endif -%}
                                </span>
                            </span>
                            <span class="close-ui ti-close"></span>
                        </button>
                        <div class="dropdown-lq hidden-lq dropdown-container-ui to-right-ui">
                            <p class="dropdown-title-ui">{{ translations.Sorting }}</p>
                            <ul class="sort-dropdown-content-ui dropdown-content-ui" data-sorting-query="{{ products.SortingQueryGET }}">
                                {% assign activeSortingOption = -1 -%}
                                {% for sortingType in products.SortingOptions -%}
                                    {% unless config.Reviews.Enabled == false and sortingType.Value == '11' -%}
                                        {% assign activeSortingOptionClass = '' -%}
                                        {% if sortingType.Value == products.SelectedSorting -%}
                                            {% assign activeSortingOptionClass = 'active-left-ui' -%}
                                            {% assign activeSortingOption = sortingType.Text -%}
                                        {% endif -%}
                                        <li class="{{activeSortingOptionClass}}" data-sorting-type="{{ sortingType.Value }}">{{ sortingType.Text }}</li>
                                    {% endunless -%}
                                {% endfor -%}
                            </ul>
                        </div>
                        {% if activeSortingOption != -1 -%}
                            <span class="active-sorting-option-ui block-ui">{{activeSortingOption}}</span>
                        {% endif -%}
                    </div>
                {% endif -%}
                <div class="f-right-ui view-options-mobile-ui">
                    <button aria-label="change-view-button" class="btn-pure-ui change-view-lq change-view-ui {% if view == 'quick-shopping'-%} btn-active-lq {% endif -%}" data-view="quick-shopping"><i class="ti-view-list icons-filtering-ui"></i></button>
                    <button aria-label="change-view-button" class="btn-pure-ui change-view-lq change-view-ui {% if view == 'list'-%} btn-active-lq {% endif -%}" data-view="list"><i class="ti-view-list-alt icons-filtering-ui"></i></button>
                    <button aria-label="change-view-button" class="btn-pure-ui change-view-lq change-view-ui {% if view == 'grid'-%} btn-active-lq {% endif -%}" data-view="grid"><i class="ti-view-grid icons-filtering-ui"></i></button>
                </div>
            </div>
            {% if settings.filterPanelView == "up" -%}
                {% include 'products/product-filters.html' -%}
            {% endif -%}
        {% endif -%}
    </header>

    {% if page.GroupId == null and products.Search == null -%}
        {% include 'products/categories-map.html' -%}
    {% else -%}
        {% unless customer.HidePrices -%}
            {% if products.FilteringOptions.PriceFrom != null and products.FilteringOptions.PriceFrom > 0 -%}
                {% assign priceFromExists = true -%}
            {% endif -%}
            {% if priceFromExists or products.FilteringOptions.PriceTo != null -%}
                {% assign pricesExist = true -%}
            {% else -%}
                {% assign pricesExist = false -%}
            {% endif -%}
        {% endunless -%}

        {% if activeFiltersKeysString != "" -%}
            {% assign activeFiltersTab = activeFiltersKeysString | Split: "||" -%}
            {% for f in activeFiltersTab -%}
                {% assign filterParams = f | Split: "|" -%}
                {% if filterParams[0] == "PRODUCERID" or filterParams[0] == "BRANDID" -%}
                    {% assign manufacturerOrBrandExists = true -%}
                {% endif -%}
            {% endfor -%}
        {% endif -%}

        {% if activeFiltersKeysString == "" or manufacturerOrBrandExists -%}
            {% assign showManufacturerOrBrand = true -%}
        {% endif -%}

        {% if settings.graphMenu == "yes" -%}
            {% if page.CurrentGroupNodes == null -%}
                {% for category in page.GroupNodes -%}
                    {% assign categoryId = category.Id | Split: ',' | Last -%}
                    {% if categoryId == page.GroupId -%}
                        <div class="undercategory-links-ui">
                            {% for node in category.Nodes -%}
                                {% assign categoryUrl = node.Url -%}
                                <a href="{{ categoryUrl }}">
                                    <div class="category-name-ui">{{ node.Name }}</div>
                                    {{node|Img:'medium'}}
                                </a>
                            {% endfor -%}
                        </div>
                    {% endif -%}
                {% endfor -%}
            {% else -%}
                <div class="undercategory-links-ui">
                    {% for node in page.CurrentGroupNodes -%}
                        {% assign categoryUrl = node.Url -%}
                        <a href="{{ categoryUrl }}">
                            <div class="category-name-ui">{{ node.Name }}</div>
                            {{node|Img:'medium'}}
                        </a>
                    {% endfor -%}
                </div>
            {% endif -%}
        {% endif -%}

        {% if products.HeaderData != null and showManufacturerOrBrand and pricesExist == false -%}
            {% if products.HeaderData.Image or products.HeaderData.Description != "" or products.HeaderData.Heading != "" -%}
                <div class="category-section-ui {% if products.HeaderData.Description != '' or products.HeaderData.Image -%} expandable-mechanism-container-lq {% else -%} mb20-ui {% endif -%} {% if settings.graphFormOfNameDescImgCategory == 'left' -%} left-ui {% endif -%}">
                    <button class="expand-data-lq {% if settings.categoryOpenedClosed == 'opened' -%} expanded-lq {% endif -%}">
                        <h1>
                            {% if products.HeaderData.Heading != "" -%}
                                {{products.HeaderData.Heading}}
                            {% else -%}
                                {{page.CurrentSiteNode.Name}}
                            {% endif -%}
                        </h1>
                        {% if products.HeaderData.Description != "" or products.HeaderData.Image -%}
                            <i class="ti-angle-down filter-arrow-ui dropdown-arrow-ui"></i>
                        {% endif -%}
                    </button>
                    {% if products.HeaderData.Description != "" or products.HeaderData.Image -%}
                        {% if products.HeaderData.ImageId == 0 -%}
                            {% assign categoryImgUrl = products.HeaderData.Image.ExternalUrl -%}
                        {% elseif products.HeaderData.ImageId > 0 -%}
                            {% capture categoryImgUrl -%}'img/{{products.HeaderData.ImageId}}/category-{{products.HeaderData.ImageId}}.jpg'{% endcapture -%}
                        {% endif -%}
                        <div class="category-img-ui expandable-ui expandable-lq {% if settings.categoryOpenedClosed == 'opened' -%} expanded-lq {% endif -%}">
                            <div class="category-img-lq" {% if products.HeaderData.Image and settings.graphFormOfNameDescImgCategory == 'background' -%} style="background: url({{categoryImgUrl}}) no-repeat center; background-size: cover" {% endif -%}>
                                {% if products.HeaderData.Image and settings.graphFormOfNameDescImgCategory == "left" -%}
                                    <div class="img-container-ui">
                                        {{products.HeaderData|Img2}}
                                    </div>
                                {% endif -%}
                                {% if products.HeaderData.Description != "" -%}
                                    <div class="category-container-ui">
                                        <div class="category-container-bg-ui">
                                            <div class="category-description-ui category-description-lq">
                                                {{products.HeaderData.Description}}
                                            </div>
                                        </div>
                                    </div>
                                {% endif -%}
                            </div>
                        </div>
                    {% endif -%}
                </div>
            {% endif -%}
        {% endif -%}

        {% if products.Search != null -%}
            {% if products.Search.Search != "" or products.Search.SearchAll != "" or products.Search.SearchAny != "" or products.Search.SearchWild != "" -%}
                <div class="selected-filters-ui search-params-ui">
                    <button class="selected-filter-item-ui search-phrase-item-ui search-phrase-item-lq selected-filter-item-lq" data-field="search">
                        <i class="ti-close filter-delete-ui"></i>
                        <span>
                            {{translations.Search}}:
                            <strong>
                                {% if products.Search.Search != "" -%}
                                    {{products.Search.Search}}
                                {% elseif products.Search.SearchAll != "" -%}
                                    {{products.Search.SearchAll}}
                                {% elseif products.Search.SearchAny != "" -%}
                                    {{products.Search.SearchAny}}
                                {% elseif products.Search.SearchWild != "" -%}
                                    {{products.Search.SearchWild}}
                                {% endif -%}
                            </strong>
                        </span>
                    </button>
                </div>
            {% endif -%}
        {% endif -%}

        {% if settings.filterPanelView == "left" -%}
            {% if activeFiltersKeysString != "" or pricesExist -%}
                <div class="selected-filters-ui">
                    <div class="form-lq selected-filters-lq" >
                        <input type="hidden" name="__action" value="Get/SearchFilters">

                        <button class="selected-filter-item-ui selected-filter-item-lq" data-field="all">
                            <i class="ti-close filter-delete-ui"></i>
                            <span>{{translations.ResetFilters}}</span>
                        </button>

                        {% unless customer.HidePrices -%}
                            {% if products.FilteringOptions.PriceFrom != null and products.FilteringOptions.PriceFrom > 0 -%}
                                <button class="selected-filter-item-ui selected-filter-item-lq" data-field="$minPrice">
                                    <i class="ti-close filter-delete-ui"></i>
                                    <span>{{translations.PriceFrom}} <strong>{{products.FilteringOptions.PriceFrom}}</strong> {{customer.CurrencyExt}}</span>
                                </button>
                                <input aria-label="minPrice" name="$minPrice" type="hidden" value="{{products.FilteringOptions.PriceFrom}}" maxlength="12">
                            {% endif -%}

                            {% if products.FilteringOptions.PriceTo != null -%}
                                <button class="selected-filter-item-ui selected-filter-item-lq" data-field="$maxPrice">
                                    <i class="ti-close filter-delete-ui"></i>
                                    <span>{{translations.PriceTo}} <strong>{{products.FilteringOptions.PriceTo}}</strong> {{customer.CurrencyExt}}</span>
                                </button>
                                <input aria-label="maxPrice" name="$maxPrice" type="hidden" value="{{products.FilteringOptions.PriceTo}}" maxlength="12">
                            {% endif -%}
                        {% endunless -%}

                        {% if activeFiltersKeysString != "" -%}
                            {% assign activeFiltersTab = activeFiltersKeysString | Split: "||" -%}
                            {% for f in activeFiltersTab -%}
                                {% assign filterParams = f | Split: "|" -%}
                                <button type="button" class="selected-filter-item-ui selected-filter-item-lq" data-field="{{filterParams[0]}}" data-value="{{filterParams[2]}}">
                                    <i class="ti-close filter-delete-ui"></i>
                                    <span>
                                        {{filterParams[1]}}:
                                        <strong>
                                            {% if filterParams[0] == "REWARD" -%}
                                                {{ translations.PointsProduct }}
                                            {% else -%}
                                                {{filterParams[3]}}
                                            {% endif -%}
                                        </strong>
                                    </span>
                                </button>
                                <input type="hidden" name="{{filterParams[0]}}" value="{{filterParams[2]}}"/>
                            {% endfor -%}
                        {% endif -%}
                    </div>
                </div>
            {% endif -%}
        {% endif -%}

        {% if products.TotalItems == 0 -%}
            <div class="no-items-ui centered-ui">
                <p class="message-bar-ui"><i class="ti-na"></i> {{translations.ProductNotFound}}</p>
            </div>

            <div class="serial-adding-validation-message-lq hidden-lq message-bar-ui error-bar-ui">
                <button class="ti-close close-ui"></button>
                <p class="message-bar-title-ui">{{translations.SerialAddingToCartFail}}</p>
                <div class="message-bar-content-ui message-bar-content-lq"></div>
            </div>

            <h2>{{translations.Recommended}}</h2>
            <section class="product-list-ui view-container-lq products-list-lq parent-container-lq {{view}}-view-lq {% if customer.HidePrices -%} prices-hidden-ui {% endif -%}" data-template="products/products-list.html">
                {% include 'products/products-list.html' -%}
            </section>

            <div class="adding-to-cart-succeed-lq message-popup-background-ui hidden-lq hide-lq container-to-hide-lq" data-url="{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}">
                <div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq">
                    <div class="box-ui product-added-to-cart-ui">
                        <i class="va-mid-ui ti-check"></i>
                        <span class="va-mid-ui line-height-1-ui">
                            {% if customer.Cart.EditedOrderId -%}
                                {{ translations.AddedToOrder }}
                            {% else -%}
                                {{ translations.AddedToCart }}
                            {% endif -%}
                        </span>
                    </div>
                </div>
            </div>
        {% else -%}
            {% if customer.HidePrices -%}
                {% include 'product/hidden-prices-msg.html' -%}
            {% endif -%}

            {% if products.FilteringOptions.Filters.OTHER.Values.REWARD.Selected -%}
                <div class="no-items-ui centered-ui">
                    <p class="message-bar-ui"><i class="ti-loop"></i> {{translations.PointsProductsInfo}}</p>
                </div>
            {% endif -%}

            <div class="serial-adding-validation-message-lq hidden-lq message-bar-ui error-bar-ui">
                <button class="ti-close close-ui"></button>
                <p class="message-bar-title-ui">{{translations.SerialAddingToCartFail}}</p>
                <div class="message-bar-content-ui message-bar-content-lq"></div>
            </div>

            <section class="product-list-ui view-container-lq products-list-lq parent-container-lq {{view}}-view-lq {% if customer.HidePrices -%} prices-hidden-ui {% endif -%} {% if products.Search != null -%} no-category-ui {% endif -%}" data-template="products/products-list.html">
                {% include 'products/products-list.html' -%}
            </section>

            <div class="adding-to-cart-succeed-lq message-popup-background-ui hidden-lq hide-lq container-to-hide-lq" data-url="{{ page.BaseHref }}{{ config.DefinedPages.Order.Url }}">
                <div class="message-popup-ui box-ui after-adding-to-cart-popup-ui after-adding-to-cart-popup-container-lq">
                    <div class="box-ui product-added-to-cart-ui">
                        <i class="va-mid-ui ti-check"></i>
                        <span class="va-mid-ui line-height-1-ui">
                            {% if customer.Cart.EditedOrderId -%}
                                {{ translations.AddedToOrder }}
                            {% else -%}
                                {{ translations.AddedToCart }}
                            {% endif -%}
                        </span>
                    </div>
                </div>
            </div>
        {% endif -%}
    {% endif -%}
</div>

{% if viewDesktop != viewMobile -%}
    <script>
        if($(window).width() > 1279) {
            $('.view-container-lq').removeClass('{{view}}-view-lq').addClass('{{viewDesktop}}-view-lq');
            $('.change-view-lq').removeClass('btn-active-lq');
            $('.change-view-lq[data-view="{{viewDesktop}}"]').addClass('btn-active-lq');
        }
    </script>
{% endif -%}

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

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

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

372

373

374

375

376

377

378

379

380

381

382

383

384

385

386

387

388

389

390

391

392

393

394

{% extends '_layout.html' -%}

{% block pageContent -%}

{% assign whatPrice = translations.Brutto | Downcase -%}

{% if customer.Cart.SubtotalPrices -%}

{% assign whatPrice = translations.Netto | Downcase -%}

{% endif -%}

{% assign viewDesktop = 'quick-shopping' -%}

{% assign viewMobile = 'quick-shopping' -%}

{% if settings.selectedViewNameDesktop -%}

{% assign viewDesktop = settings.selectedViewNameDesktop -%}

{% endif -%}

{% if page.Cookies.selectedViewNameDesktop -%}

{% assign viewDesktop = page.Cookies.selectedViewNameDesktop -%}

{% endif -%}

{% if settings.selectedViewNameMobile -%}

{% assign viewMobile = settings.selectedViewNameMobile -%}

{% endif -%}

{% if page.Cookies.selectedViewNameMobile -%}

{% assign viewMobile = page.Cookies.selectedViewNameMobile -%}

{% endif -%}

{% assign view = viewMobile -%}

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

</div>

{% if products.FilteringOptions -%}

{% if settings.filterPanelView == 'left' -%}

<span class="va-mid-ui line-height-1-ui">{{translations.Filter}}</span>

{% if activeFiltersQuantity > 0 -%}

<span class="counter-bg-ui"><span class="counter-ui">{{activeFiltersQuantity}}</span></span>

{% endif -%}

</div>

{% else -%}

{% assign filtersOpened = false -%}

{% if settings.filterPanelView == 'up' -%}

{% if products.FilteringOptions.Results or settings.upFilterPanelView == 'opened' -%}

{% assign filtersOpened = true -%}

{% endif -%}

{% assign fo = products.FilteringOptions -%}

{% assign selectedQuantity = 0 -%}

{% for filter in fo.Filters -%}

{% unless filter.Field == 'MARK' and config.Reviews.Enabled == false -%}

{% for value in filter.Values -%}

{% if value.Selected -%}

{% assign selectedQuantity = selectedQuantity | Plus: 1 -%}

{% endif -%}

{% endfor -%}

{% endunless -%}

{% endfor -%}

<button class="toggle-filters-button-ui toggle-filters-button-lq btn-pure-ui expand-data-lq dropdown-trigger-ui {% if selectedQuantity > 0 -%} with-quantity-ui {% endif -%} {% if filtersOpened -%} expanded-lq {% endif -%}">

<span class="filters-label-lq {% if filtersOpened -%} hidden-lq {% endif -%}">{{translations.Filter}}</span>

<span class="filters-label-lq {% if filtersOpened == false -%} hidden-lq {% endif -%}">{{translations.CloseFilters}}</span>

</span>

</button>

{% if selectedQuantity > 0 -%}

<span class="active-sorting-option-ui block-ui">{{selectedQuantity}}</span>

{% endif -%}

</div>

{% endif -%}

{% if products.TotalItems != 0 -%}

<span class="desktop-ui">{{ translations.Sorting }}</span>

{% assign activeSortingOption = -1 -%}

{% for sortingType in products.SortingOptions -%}

{% if sortingType.Value == products.SelectedSorting -%}

{% assign activeSortingOption = sortingType.Text -%}

{% endif -%}

{% endfor -%}

{% if activeSortingOption != -1 -%}

{% else -%}

{% endif -%}

</span>

</button>

<p class="dropdown-title-ui">{{ translations.Sorting }}</p>

{% assign activeSortingOption = -1 -%}

{% for sortingType in products.SortingOptions -%}

{% unless config.Reviews.Enabled == false and sortingType.Value == '11' -%}

{% assign activeSortingOptionClass = '' -%}

{% if sortingType.Value == products.SelectedSorting -%}

{% assign activeSortingOptionClass = 'active-left-ui' -%}

{% assign activeSortingOption = sortingType.Text -%}

{% endif -%}

<li class="{{activeSortingOptionClass}}" data-sorting-type="{{ sortingType.Value }}">{{ sortingType.Text }}</li>

{% endunless -%}

{% endfor -%}

</ul>

</div>

{% if activeSortingOption != -1 -%}

<span class="active-sorting-option-ui block-ui">{{activeSortingOption}}</span>

{% endif -%}

</div>

{% endif -%}

</div>

{% if settings.filterPanelView == "up" -%}

{% include 'products/product-filters.html' -%}

{% endif -%}

</header>

{% if page.GroupId == null and products.Search == null -%}

{% include 'products/categories-map.html' -%}

{% else -%}

{% unless customer.HidePrices -%}

{% if products.FilteringOptions.PriceFrom != null and products.FilteringOptions.PriceFrom > 0 -%}

{% assign priceFromExists = true -%}

{% endif -%}

{% if priceFromExists or products.FilteringOptions.PriceTo != null -%}

{% assign pricesExist = true -%}

{% else -%}

{% assign pricesExist = false -%}

{% endif -%}

{% endunless -%}

{% if activeFiltersKeysString != "" -%}

{% assign activeFiltersTab = activeFiltersKeysString | Split: "||" -%}

{% for f in activeFiltersTab -%}

{% assign filterParams = f | Split: "|" -%}

{% if filterParams[0] == "PRODUCERID" or filterParams[0] == "BRANDID" -%}

{% assign manufacturerOrBrandExists = true -%}

{% endif -%}

{% endfor -%}

{% endif -%}

{% if activeFiltersKeysString == "" or manufacturerOrBrandExists -%}

{% assign showManufacturerOrBrand = true -%}

{% endif -%}

{% if settings.graphMenu == "yes" -%}

{% if page.CurrentGroupNodes == null -%}

{% for category in page.GroupNodes -%}

{% assign categoryId = category.Id | Split: ',' | Last -%}

{% if categoryId == page.GroupId -%}

{% for node in category.Nodes -%}

{% assign categoryUrl = node.Url -%}

</a>

{% endfor -%}

</div>

{% endif -%}

{% endfor -%}

{% else -%}

{% for node in page.CurrentGroupNodes -%}

{% assign categoryUrl = node.Url -%}

</a>

{% endfor -%}

</div>

{% endif -%}

{% if products.HeaderData != null and showManufacturerOrBrand and pricesExist == false -%}

{% if products.HeaderData.Image or products.HeaderData.Description != "" or products.HeaderData.Heading != "" -%}

<h1>

{% if products.HeaderData.Heading != "" -%}

{% else -%}

{% endif -%}

</h1>

{% if products.HeaderData.Description != "" or products.HeaderData.Image -%}

{% endif -%}

</button>

{% if products.HeaderData.Description != "" or products.HeaderData.Image -%}

{% if products.HeaderData.ImageId == 0 -%}

{% assign categoryImgUrl = products.HeaderData.Image.ExternalUrl -%}

{% elseif products.HeaderData.ImageId > 0 -%}

{% capture categoryImgUrl -%}'img/{{products.HeaderData.ImageId}}/category-{{products.HeaderData.ImageId}}.jpg'{% endcapture -%}

{% endif -%}

{% if products.HeaderData.Image and settings.graphFormOfNameDescImgCategory == "left" -%}

</div>

{% endif -%}

{% if products.HeaderData.Description != "" -%}

</div>

{% endif -%}

</div>

{% endif -%}

</div>

{% endif -%}

{% if products.Search != null -%}

{% if products.Search.Search != "" or products.Search.SearchAll != "" or products.Search.SearchAny != "" or products.Search.SearchWild != "" -%}

<span>

{{translations.Search}}:

{% if products.Search.Search != "" -%}

{% elseif products.Search.SearchAll != "" -%}

{% elseif products.Search.SearchAny != "" -%}

{% elseif products.Search.SearchWild != "" -%}

{% endif -%}

</strong>

</span>

</button>

</div>

{% endif -%}

{% if settings.filterPanelView == "left" -%}

{% if activeFiltersKeysString != "" or pricesExist -%}

<span>{{translations.ResetFilters}}</span>

</button>

{% unless customer.HidePrices -%}

{% if products.FilteringOptions.PriceFrom != null and products.FilteringOptions.PriceFrom > 0 -%}

<span>{{translations.PriceFrom}} <strong>{{products.FilteringOptions.PriceFrom}}</strong> {{customer.CurrencyExt}}</span>

</button>

{% endif -%}

{% if products.FilteringOptions.PriceTo != null -%}

<span>{{translations.PriceTo}} <strong>{{products.FilteringOptions.PriceTo}}</strong> {{customer.CurrencyExt}}</span>

</button>

{% endif -%}

{% endunless -%}

{% if activeFiltersKeysString != "" -%}

{% assign activeFiltersTab = activeFiltersKeysString | Split: "||" -%}

{% for f in activeFiltersTab -%}

{% assign filterParams = f | Split: "|" -%}

<span>

{{filterParams[1]}}:

{% if filterParams[0] == "REWARD" -%}

{% else -%}

{% endif -%}

</strong>

</span>

</button>

{% endfor -%}

{% endif -%}

</div>

{% endif -%}

{% if products.TotalItems == 0 -%}

<p class="message-bar-ui"><i class="ti-na"></i> {{translations.ProductNotFound}}</p>

</div>

<p class="message-bar-title-ui">{{translations.SerialAddingToCartFail}}</p>

</div>

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

{% include 'products/products-list.html' -%}

</section>

{% if customer.Cart.EditedOrderId -%}

{% else -%}

{% endif -%}

</span>

</div>

{% else -%}

{% if customer.HidePrices -%}

{% include 'product/hidden-prices-msg.html' -%}

{% endif -%}

{% if products.FilteringOptions.Filters.OTHER.Values.REWARD.Selected -%}

<p class="message-bar-ui"><i class="ti-loop"></i> {{translations.PointsProductsInfo}}</p>

</div>

{% endif -%}

<p class="message-bar-title-ui">{{translations.SerialAddingToCartFail}}</p>

</div>

{% include 'products/products-list.html' -%}

</section>

{% if customer.Cart.EditedOrderId -%}

{% else -%}

{% endif -%}

</span>

</div>

{% endif -%}

</div>

{% if viewDesktop != viewMobile -%}

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

$('.view-container-lq').removeClass('{{view}}-view-lq').addClass('{{viewDesktop}}-view-lq');

$('.change-view-lq').removeClass('btn-active-lq');

$('.change-view-lq[data-view="{{viewDesktop}}"]').addClass('btn-active-lq');

}

</script>

{% endif -%}

</div>

{% endblock -%}

products/product-filters.html


<div class="form-lq inline-block-ui box-ui product-filters-ui product-filters-lq {% if settings.filterPanelView == 'up' -%} expandable-ui expandable-lq {% if products.FilteringOptions.Results or settings.upFilterPanelView == 'opened' -%} expanded-lq {% endif -%}{% endif -%}">
    {% if settings.filterPanelView == "left" -%}
        <h2>{{translations.Filters}}</h2>
        <i class="ti-close close-ui close-filters-mobile-ui close-filters-mobile-lq toggle-filter-mobile-lq"></i>
    {% endif -%}
    <input type="hidden" name="__action" value="Get/SearchFilters" />
    <ul>
        {% assign fo = products.FilteringOptions -%}
        {% unless customer.HidePrices -%}
            <li class="clear-after-ui filter-item-ui price-filter-ui">
                <div class="price-label-ui">{{ translations.Price }}</div>
                <div class="price-range-ui flex-ui vertically-centered-ui space-between-ui">
                    <span>{{translations.RangeFrom | Downcase }}</span>
                    <input aria-label="minPrice" name="$minPrice" type="tel" data-min="{{ fo.MinPrice }}" data-max="{{ fo.MaxPrice }}" value="{{ fo.PriceFrom }}" maxlength="5"/>
                    <span>{{translations.RangeTo | Downcase }}</span>
                    <input aria-label="maxPrice" name="$maxPrice" type="tel" data-min="{{ fo.MinPrice }}" data-max="{{ fo.MaxPrice }}" value="{{ fo.PriceTo }}" maxlength="5"/>
                    <span>{{ currencyExt }}</span>
                </div>
            </li>
        {% endunless -%}
        {% if settings.graphicColorFilter == 'yes' and color-filter.Content and color-filter.Content != '' %}
            {% assign colorFilterArr = color-filter.Content | StripNewlines | Split: '|||' -%}
            {% assign colorFilterName = colorFilterArr[0] -%}
            {% assign colorFilterValues = colorFilterArr[1] | Split: '||' -%}
        {% endif -%}
        {% for filter in fo.Filters -%}
            {% unless filter.Field == 'MARK' and config.Reviews.Enabled == false -%}
                {% assign isSthSelected = false -%}
                {% assign allSelected = false -%}
                {% assign selectedQuantity = 0 -%}
                {% for value in filter.Values -%}
                    {% if value.Selected -%}
                        {% if isSthSelected == false and settings.toggleFilters == 2 -%}
                            {% assign isSthSelected = true -%}
                        {% endif -%}
                        {% capture stringToAdd -%}{{value.Field}}|{{filter.Heading}}|{{value.Value}}|{{value.Text}}||{% endcapture -%}
                        {% assign activeFiltersKeysString = activeFiltersKeysString | Append: stringToAdd -%}
                        {% assign activeFiltersQuantity = activeFiltersKeysString | Split:'||' | Size -%}
                        {% assign selectedQuantity = selectedQuantity | Plus: 1 -%}
                        {% assign filtersQuantity = filter.Values | Size -%}
                        {% if selectedQuantity == filtersQuantity -%}
                            {% assign allSelected = true -%}
                        {% endif -%}
                    {% endif -%}
                {% endfor -%}
                <li class="clear-after-ui filter-item-ui filter-item-lq {% if settings.filterPanelView == 'left' -%} expandable-mechanism-container-lq {% endif -%}">
                    {% if settings.filterPanelView == "left" -%}
                        <button class="btn-pure-ui dropdown-ui filter-drop-ui {% if settings.filterPanelView == 'left' -%} expand-data-lq {% if isSthSelected or settings.toggleFilters == 1 -%}expanded-lq {% endif -%}{% endif -%}">
                            <span class="filter-heading-ui dropdown-label-ui">{{ filter.Heading | Capitalize }}</span>
                            <i class="ti-angle-down filter-arrow-ui dropdown-arrow-ui"></i>
                        </button>
                    {% else -%}
                        <div class="btn-pure-ui dropdown-ui filter-drop-ui">
                            <label class="checkbox-ui clear-after-ui">
                                <input class="all-values-checkbox-lq" name="{{ filter.Heading | H }}-all-values" type="checkbox" value="{{ filter.Heading | H }}" {% if allSelected -%} checked {% endif -%} />
                                <span class="filter-heading-ui dropdown-label-ui label-ui">{{ filter.Heading | Capitalize }}</span>
                            </label>
                        </div>
                    {% endif -%}
                    <div class="clear-after-ui {% if settings.filterPanelView == 'left' -%} expandable-ui expandable-lq {% endif -%} {% if isSthSelected or settings.toggleFilters == 1 -%}expanded-lq{% endif -%}">
                        {% assign filterValuesLength = filter.Values | Size -%}
                        {% if filter.Field == colorFilterName or isSthSelected or settings.filterPanelView == "up" -%}
                            {% assign limit = filterValuesLength | ToInt -%}
                        {% else -%}
                            {% assign limit = settings.maxfilter | ToInt -%}
                        {% endif -%}
                        <div class="filter-value-list-ui {% if settings.maxfilter == 3 -%} three-ui {% elseif settings.maxfilter == 5 -%} five-ui {% elseif settings.maxfilter == 8 -%} eight-ui {% endif -%}">
                            {% for value in filter.Values limit: limit -%}
                                <label class="checkbox-ui {% if filter.Field == colorFilterName -%} color-checkbox-ui {% endif -%}">
                                    <input name="{{ value.Field | H }}" type="checkbox" {% if value.Selected -%} checked {% endif -%} {% if value.Count == 0 and isSthSelected == false -%} disabled {% endif -%} value="{{ value.Value | H }}" />
                                    {% if value.Field == colorFilterName -%}
                                        {% for colorFilterValue in colorFilterValues -%}
                                            {% assign colorFilterValueArr = colorFilterValue | Split: '|' -%}
                                            {% assign colorFilterValueName = colorFilterValueArr[0] -%}
                                            {% assign colorFilterValueHash = colorFilterValueArr[1] -%}
                                            {% if colorFilterValueName == value.Value -%}
                                                {% assign colorHash = colorFilterValueHash -%}
                                            {% endif -%}
                                        {% endfor -%}
                                    {% endif -%}
                                    <span class="label-ui {% if colorHash == '#FFFFFF' or colorHash == '#ffffff' or colorHash == 'multicolor' -%} white-ui {% endif -%}" {% if value.Field == colorFilterName -%} style="background: {% if colorHash == 'multicolor' -%}url({{config.Url}}css/img/multicolor.png){% else -%}{{colorHash}}{% endif -%}; color: transparent" {% endif -%}>
                                        {% if value.Field != colorFilterName -%}
                                            {% if value.Field == "REWARD" -%}
                                                {{ translations.PointsProduct }}
                                            {% else -%}
                                                {{ value.Text }}
                                            {% endif -%}
                                            ({{value.Count}})
                                        {% endif -%}
                                    </span>
                                </label>
                            {% endfor -%}
                        </div>
                        {% if filterValuesLength > limit and filter.Field != colorFilterName and settings.filterPanelView == "left" -%}
                            <button class="btn-pure-ui show-more-ui more-filter-items-lq expand-more-filters-lq" data-filter-index="{{forloop.index0}}" data-limit="{{limit}}" data-toggle-label="{{translations.Collapse | Downcase}}">...{{translations.ShowMore | Downcase}}</button>
                        {% endif -%}
                    </div>
                </li>
            {% endunless -%}
        {% endfor -%}
        {% if settings.filterPanelView == "up" -%}
            <li class="reset-filters-ui">
                <button class="reset-filters-lq btn-ui">{{ translations.ClearAllFilters }}</button>
            </li> 
        {% endif -%}
    </ul>
    {% if settings.filterPanelView == "left" -%}
        <button class="filter-lq filters-apply-button-ui">{{ translations.Apply }}</button>
    {% endif -%}
</div>

100

101

102

103

104

105

106

107

108

109

110

111

{% if settings.filterPanelView == "left" -%}

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

{% endif -%}

<ul>

{% assign fo = products.FilteringOptions -%}

{% unless customer.HidePrices -%}

<div class="price-label-ui">{{ translations.Price }}</div>

<span>{{translations.RangeFrom | Downcase }}</span>

<span>{{translations.RangeTo | Downcase }}</span>

<span>{{ currencyExt }}</span>

</div>

</li>

{% endunless -%}

{% if settings.graphicColorFilter == 'yes' and color-filter.Content and color-filter.Content != '' %}

{% assign colorFilterArr = color-filter.Content | StripNewlines | Split: '|||' -%}

{% assign colorFilterName = colorFilterArr[0] -%}

{% assign colorFilterValues = colorFilterArr[1] | Split: '||' -%}

{% endif -%}

{% for filter in fo.Filters -%}

{% unless filter.Field == 'MARK' and config.Reviews.Enabled == false -%}

{% assign isSthSelected = false -%}

{% assign allSelected = false -%}

{% assign selectedQuantity = 0 -%}

{% for value in filter.Values -%}

{% if value.Selected -%}

{% if isSthSelected == false and settings.toggleFilters == 2 -%}

{% assign isSthSelected = true -%}

{% endif -%}

{% capture stringToAdd -%}{{value.Field}}|{{filter.Heading}}|{{value.Value}}|{{value.Text}}||{% endcapture -%}

{% assign activeFiltersKeysString = activeFiltersKeysString | Append: stringToAdd -%}

{% assign activeFiltersQuantity = activeFiltersKeysString | Split:'||' | Size -%}

{% assign selectedQuantity = selectedQuantity | Plus: 1 -%}

{% assign filtersQuantity = filter.Values | Size -%}

{% if selectedQuantity == filtersQuantity -%}

{% assign allSelected = true -%}

{% endif -%}

{% endfor -%}

{% if settings.filterPanelView == "left" -%}

<span class="filter-heading-ui dropdown-label-ui">{{ filter.Heading | Capitalize }}</span>

</button>

{% else -%}

<span class="filter-heading-ui dropdown-label-ui label-ui">{{ filter.Heading | Capitalize }}</span>

</label>

</div>

{% endif -%}

{% assign filterValuesLength = filter.Values | Size -%}

{% if filter.Field == colorFilterName or isSthSelected or settings.filterPanelView == "up" -%}

{% assign limit = filterValuesLength | ToInt -%}

{% else -%}

{% assign limit = settings.maxfilter | ToInt -%}

{% endif -%}

{% for value in filter.Values limit: limit -%}

{% if value.Field == colorFilterName -%}

{% for colorFilterValue in colorFilterValues -%}

{% assign colorFilterValueArr = colorFilterValue | Split: '|' -%}

{% assign colorFilterValueName = colorFilterValueArr[0] -%}

{% assign colorFilterValueHash = colorFilterValueArr[1] -%}

{% if colorFilterValueName == value.Value -%}

{% assign colorHash = colorFilterValueHash -%}

{% endif -%}

{% endfor -%}

{% endif -%}

{% if value.Field != colorFilterName -%}

{% if value.Field == "REWARD" -%}

{% else -%}

{% endif -%}

({{value.Count}})

{% endif -%}

</span>

</label>

{% endfor -%}

</div>

{% if filterValuesLength > limit and filter.Field != colorFilterName and settings.filterPanelView == "left" -%}

<button class="btn-pure-ui show-more-ui more-filter-items-lq expand-more-filters-lq" data-filter-index="{{forloop.index0}}" data-limit="{{limit}}" data-toggle-label="{{translations.Collapse | Downcase}}">...{{translations.ShowMore | Downcase}}</button>

{% endif -%}

</div>

</li>

{% endunless -%}

{% endfor -%}

{% if settings.filterPanelView == "up" -%}

<button class="reset-filters-lq btn-ui">{{ translations.ClearAllFilters }}</button>

</li>

{% endif -%}

</ul>

{% if settings.filterPanelView == "left" -%}

<button class="filter-lq filters-apply-button-ui">{{ translations.Apply }}</button>

{% endif -%}

</div>

W pliku common/categories-navigation/categories-navigation-partial.html na samym dole znajdź warunek {% if areFilteringOptionsClass == 'with-filters-ui’ -%} i zamień go na {% if areFilteringOptionsClass == 'with-filters-ui’ and settings.filterPanelView == „left” -%}

Następnie w pliku js/init.js znajdź frazę events: function() i linijkę niżej wklej poniższy kod:


		$('body').on('change', '.all-values-checkbox-lq', function(e) {
			var isChecked = $(e.currentTarget).prop('checked');
			$(e.currentTarget).parents('.filter-item-lq').find('[type=checkbox]').prop('checked', isChecked);
		});
		$('body').on('change', '.filters-up-lq .product-filters-lq input', function(e) {
			app.filter(e);
		});

$('body').on('change', '.all-values-checkbox-lq', function(e) {

var isChecked = $(e.currentTarget).prop('checked');

$(e.currentTarget).parents('.filter-item-lq').find('[type=checkbox]').prop('checked', isChecked);

});

$('body').on('change', '.filters-up-lq .product-filters-lq input', function(e) {

app.filter(e);

});

Kontynuując zmiany w tym samym pliku, wyszukaj frazę form.find('[type=”number”]’).val(”); i zmień tam number na tel. Na końcu funkcji w której znajduje się ta fraza dopisz app.filter(e);.

Przejdź do pliku js/init-ui1.js i na samym końcu wklej poniższy kod:


$('body').on('click', '.toggle-filters-button-lq', function () {
    $('.filters-label-lq').toggleClass('hidden-lq');
});

$('body').on('click', '.toggle-filters-button-lq', function () {

$('.filters-label-lq').toggleClass('hidden-lq');

});

W tym momencie masz już dodany filtr, w następnych krokach będziesz edytował styl. W pliku scss/globals/_globals-m.scss znajdź frazę .products-page-lq{ i usuń z tej klasy margin-top: 114px;. Kilka linijek niżej znajdziesz:


  .category-description-ui{
    display: none;
  }

.category-description-ui{

display: none;

}

Usuń ten fragment. Jeszcze niżej znajdziesz .category-img-ui{. Usuń w nim height: auto !important;. Znajdz i usuń poniższy fragment:


      .view-options-mobile-ui{
        width: 21px;
        margin-right: 20px;
      }

.view-options-mobile-ui{

width: 21px;

margin-right: 20px;

}

Linijkę niżej jest kod .sorting-options-ui{. Zmień w nim linijkę width: calc(100vw – 80px – 21px – 60px); na width: calc(100vw – 192px); i usuń oba wpisy związane z wysokością height: 26px;. Następnie w obrębie @media only screen and (max-width: 1279px) { (np w 2 linijce pliku) wklej poniższy kod:


  .products-navigation-ui.filters-up-ui .sorting-views-container-ui .sorting-options-ui{
    .dropdown-trigger-ui{
      padding: 10px;
    }
    .toggle-filters-button-ui{
      padding-bottom: 0;
      & + .active-sorting-option-ui{
        display: block;
      }
    } 
  } 

  .filters-up-main-container-ui{
    margin: 0;
  }

  .filters-up-ui{
    position: static;
    margin: 0;
    width: 100%;
    background-color: $bgColor;
    .sorting-views-container-ui{
      padding: 20px 20px 0 20px;
    }
    .product-filters-ui{
      position: static;
      padding: 0;
      background: $bgColor;
      & > ul{
        margin: 20px;
        li{
          width: calc(50% - 10px);
          &:first-child{
            width: 100%;
          }
          &:nth-child(5n){
            margin-right: 20px;
          }
          &:nth-child(2n+1){
            margin-right: 0;
          }
        }
      } 
    }
  } 

  .undercategory-links-ui{
    padding: 0 20px;
    a{
      width: calc(50% - 10px);
      &:nth-child(5n){
        margin-right: 20px;
      }
      &:nth-child(2n){
        margin-right: 0;
      }
    }
  }

.products-navigation-ui.filters-up-ui .sorting-views-container-ui .sorting-options-ui{

.dropdown-trigger-ui{

padding: 10px;

}

.toggle-filters-button-ui{

padding-bottom: 0;

& + .active-sorting-option-ui{

display: block;

}

.filters-up-main-container-ui{

margin: 0;

}

.filters-up-ui{

position: static;

margin: 0;

width: 100%;

background-color: $bgColor;

.sorting-views-container-ui{

padding: 20px 20px 0 20px;

}

.product-filters-ui{

position: static;

padding: 0;

background: $bgColor;

& > ul{

margin: 20px;

li{

width: calc(50% - 10px);

&:first-child{

width: 100%;

}

&:nth-child(5n){

margin-right: 20px;

}

&:nth-child(2n+1){

margin-right: 0;

}

.undercategory-links-ui{

padding: 0 20px;

width: calc(50% - 10px);

&:nth-child(5n){

margin-right: 20px;

}

&:nth-child(2n){

margin-right: 0;

}

Przejdz do pliku scss/globals/_globals1.scss na samym dole wklej poniższy kod:


.undercategory-links-ui{
  display: flex;
  flex-wrap: wrap;
  a{
    width: calc(20% - 16px);
    border: 1px solid $lightBorderColor;
    margin: 0 20px 20px 0;
    padding: 20px;
    text-align: center;
    &:nth-child(5n){
      margin-right: 0;
    }
  }
  .category-name-ui{
    font-weight: 700;
    margin-bottom: 20px;
    color: $primaryColorFont;
  }
  img{
    max-width: 100%;
    max-height: 200px;
  }
}

.graph-desc-category-down-ui{
  display: flex;
  flex-flow: column;
  .category-section-ui{
    order: 1;
  }
}

.category-section-ui{
  button{
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    border: 1px solid $lightBorderColor;
    padding: 20px;
    background: transparent;
    color: $primaryColorFont;
  }
  h1{
    font-size: 20px;
    color: $primaryColorFont;
  }
  &.left-ui{
    .category-img-ui .category-container-ui .category-container-bg-ui{
      max-width: none;
    }
    .category-img-lq{
      display: flex;
      border: 1px solid $lightBorderColor;
      height: auto !important;
    }
    .img-container-ui{
      min-width: 150px;
      max-width: 150px;
      padding: 20px;
    }
    img{
      max-height: 100%;
    }
    .category-container-ui{
      position: static;
    }
    .category-description-ui{
      height: auto !important;
    }
  }
}

.filters-up-ui{
  flex-wrap: wrap;
  .toggle-filters-button-ui + .active-sorting-option-ui{
    transition: all ease 300ms;
  }
  .sorting-options-ui .toggle-filters-button-ui{
    padding-bottom: 10px;
    &.with-quantity-ui{
      padding-bottom: 0;
    }
    &.expanded-lq{
      background-color: $btnSolidBgColor;
      color: $btnSolidTextColor;
      & + .active-sorting-option-ui{
        background-color: $btnSolidBgColor;
        color: $btnSolidTextColor;
      }
    }
  }
  .product-filters-ui > ul{
    display: flex;
    flex-wrap: wrap;
    li{
      width: calc(20% - 16px);
      border: 1px solid $lightBorderColor;
      margin: 0 20px 20px 0;
      &:nth-child(5n){
        margin-right: 0;
      }
    }
    .price-filter-ui{
      padding: 20px;
    }
    .reset-filters-ui{
      border: none;
    }
    .filter-drop-ui{
      padding: 10px 20px;
      border-bottom: 1px solid $lightBorderColor;
    }
    .filter-value-list-ui{
      padding: 10px 20px;
      overflow: auto;
      &::-webkit-scrollbar {
        width: 4px;
        border-radius: 50%;
      }
      &::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 4px transparent;
      }
      &::-webkit-scrollbar-thumb {
        background-color: rgba(#8E8E8E, 0.5);
        outline: none;
        border-radius: 2px;
        &:hover{
          background-color: #8E8E8E;
        }
      }
      &.three-ui{
        max-height: 140px;
      }
      &.five-ui{
        max-height: 220px;
      }
      &.eight-ui{
        max-height: 340px;
      }
    }
  }
}

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

.undercategory-links-ui{

display: flex;

flex-wrap: wrap;

width: calc(20% - 16px);

border: 1px solid $lightBorderColor;

margin: 0 20px 20px 0;

padding: 20px;

text-align: center;

&:nth-child(5n){

margin-right: 0;

}

.category-name-ui{

font-weight: 700;

margin-bottom: 20px;

color: $primaryColorFont;

}

img{

max-width: 100%;

max-height: 200px;

}

.graph-desc-category-down-ui{

display: flex;

flex-flow: column;

.category-section-ui{

order: 1;

}

.category-section-ui{

button{

display: flex;

width: 100%;

align-items: center;

justify-content: space-between;

border: 1px solid $lightBorderColor;

padding: 20px;

background: transparent;

color: $primaryColorFont;

}

h1{

font-size: 20px;

color: $primaryColorFont;

}

&.left-ui{

.category-img-ui .category-container-ui .category-container-bg-ui{

max-width: none;

}

.category-img-lq{

display: flex;

border: 1px solid $lightBorderColor;

height: auto !important;

}

.img-container-ui{

min-width: 150px;

max-width: 150px;

padding: 20px;

}

img{

max-height: 100%;

}

.category-container-ui{

position: static;

}

.category-description-ui{

height: auto !important;

}

.filters-up-ui{

flex-wrap: wrap;

.toggle-filters-button-ui + .active-sorting-option-ui{

transition: all ease 300ms;

}

.sorting-options-ui .toggle-filters-button-ui{

padding-bottom: 10px;

&.with-quantity-ui{

padding-bottom: 0;

}

&.expanded-lq{

background-color: $btnSolidBgColor;

color: $btnSolidTextColor;

& + .active-sorting-option-ui{

background-color: $btnSolidBgColor;

color: $btnSolidTextColor;

}

.product-filters-ui > ul{

display: flex;

flex-wrap: wrap;

li{

width: calc(20% - 16px);

border: 1px solid $lightBorderColor;

margin: 0 20px 20px 0;

&:nth-child(5n){

margin-right: 0;

}

.price-filter-ui{

padding: 20px;

}

.reset-filters-ui{

border: none;

}

.filter-drop-ui{

padding: 10px 20px;

border-bottom: 1px solid $lightBorderColor;

}

.filter-value-list-ui{

padding: 10px 20px;

overflow: auto;

&::-webkit-scrollbar {

width: 4px;

border-radius: 50%;

}

&::-webkit-scrollbar-track {

-webkit-box-shadow: inset 0 0 4px transparent;

}

&::-webkit-scrollbar-thumb {

background-color: rgba(#8E8E8E, 0.5);

outline: none;

border-radius: 2px;

&:hover{

background-color: #8E8E8E;

}

&.three-ui{

max-height: 140px;

}

&.five-ui{

max-height: 220px;

}

&.eight-ui{

max-height: 340px;

}

Ostatnim krokiem będzie znalezienie w scss/partials/_product-list.scss frazy .change-view-ui i podmień margin-right na margin-left

Jedyne zmiany w panelu administracyjnym wymagają dodania dwóch tłumaczeń. Wygląd sklepu -> Ustawienia -> Tłumaczenia:
– CloseFilters: Zwiń filtry
– ClearAllFilters: Wyczyść wszystkie filtry

Dodanie nowego widoku filtrów

Dodanie nowego widoku filtrów

Szafir

Czy ten artykuł był pomocny?

Społeczność Comarch

Oferta e-Commerce

Przydatne linki

Kontakt