I'm trying to make a scroll on products in a given category for articles in shopware 6. I've managed to extend the product-detail html.twig file to add the next and previous on the page. The problem I'm facing is how to generate the URL links in a given category.
{% sw_extends '#storefront/page/product-detail/index.html.twig' %}
{% block base_content %}
« Previous
Next »
{{parent()}}
{% endblock %}
With the twig function seoUrl, you can generate links to other pages.
After the URL you can add query strings for the right pagination, see the example:
{{ seoUrl('frontend.navigation.page', { navigationId: 'ID' }) }}
Related
I am trying to re-create this Wordpress blog post on Jekyll. The post is made up of images with descriptions, with 5 or 6 such images per page.
I created the page with a Wordpress pagination plugin. Jekyll uses a paginate plugin to paginate blog menus, but it seems I cannot re-use that for a single blog post because:
the number of items per page must be hard-coded in _config.yml
I don't have the same number of elements on every page of my blog post anyway
I use a script to create this post, so I can use HTML, markdown, whatever. I could also make a separate file for each page--and hopefully, figure out how to direct Jekyll to find them without the date prefix.
I don't know Javascript or Ruby, but I can mostly find my way around. What I really need to know is which strategy to take so I can work toward that instead of spending all morning on something that won't work well.
So, how would you do it?
Here's my idea of what it could look like in Jekyll. This is a hack with some potential issues.
TL;DR
The blog post you have shared is using two different layouts for the start page and the subpages. The index has a different position for the menu and the intro. Also, the page content differs.
Good news: Jekyll has layouts, powerful collections (beside posts), as well as includes to reuse content. See the details with some notes below. I have also added short post about the solution to my own blog.
You need two layouts
_layouts\paginated-post.md
---
---
<p>tags here</p>
<h2>{{ page.title }}</h2>
<!-- page menu -->
<ul>
<li>{{ page.title }}</li>
{% for item in page.page_urls %}
<li>{{ item.title }} Palettes</li>
{% endfor %}
</ul>
{{ content }}
<h2>Pages</h2>
<ul>
<li>1</li>
{% for item in page.page_urls %}
{% assign page_number = forloop.index | plus: 1 %}
<li>{{ page_number }}</li>
{% endfor %}
</ul>
_layouts\paginated-post-index.md
---
---
<p>tags here</p>
<h2>{{ page.title }}</h2>
I created Artificial Intelligence to produce these palettes ...
<h2>Menu</h2>
<!-- page menu here -->
<ul>
<li>{{ page.title }}</li>
{% for item in page.page_urls %}
<li>{{ item.title }} Palettes</li>
{% endfor %}
</ul>
{{ content }}
<h2>Pages</h2>
<ul>
<li>1</li>
{% for item in page.page_urls %}
{% assign page_number = forloop.index | plus: 1 %}
<li>{{ page_number }}</li>
{% endfor %}
</ul>
Add a new collection
_config.yml
Note: I have chosen permalink path here, the defaults are optional if you set a layout in each collection item). Learn more about Jekyll collections in the docs.
collections:
palettes:
output: true
permalink: /:path/
defaults:
- scope:
path: ""
values:
layout: paginated-post
New collection folder (_palettes) with two files:
The index on each page defines the palettes index.
_palettes\index.md
---
layout: paginated-post-index
title: AI-Generated Palettes
index: palettes-index
page_urls:
- title: Wes Anderson
palette: Kind of Bird
url: /wes-anderson-kind-of-bird/
---
{% include palettes/wes.html %}
_palettes\wes-anderson-kind-of-bird.md
---
title: AI-Generated Palettes
subtitle: Wes Anderson – Kind of Bird
index: palettes-index
page_urls:
- title: Wes Anderson
palette: Kind of Bird
url: /wes-anderson-kind-of-bird/
---
{% include palettes/wes.html %}
Include file used above in _includes\palettes\wes.html
Note: the first line is the only line which will cause issues in other palette include files - maybe you will find your own solution or can just adjust the index here.
<h2>{{ page.page_urls[0].title }} </h2>
image here
Merin’s Fire: ff9506
Trojan Horse Brown: 7b571e
Minestrone: c4280d
Punch of Yellow: efd185
Root Brew: 2b0f0b
Green Ink: 12887f
Within Shopware 6, has anyone figured out how to remove the “add to cart” button for some products? My goal is to allow the add to cart on most items, but I’d like the option/ability to remove it for select products.
Thanks in advance!
Scott
You can use a custom field for this.
In admin go to Settings / Custom fields and add a new custom field set. Name it for example custom_product and assign Products, save. Then add a new custom field. Name it for example custom_product_remove_buy_button and choose Active switch as type.
Alternatively, you can create the custom field programmatically as described in the documentation.
You will see the new custom field in admin in product detail under Specifications / Custom fields.
Then you can use the custom field in a template to disable the "add to cart" button in the storefront. In order to remove the button on the product detail page, create a new file src/Resources/views/storefront/page/product-detail/buy-widget.html.twig in your theme or plugin and paste the following code:
{% sw_extends '#Storefront/storefront/page/product-detail/buy-widget.html.twig' %}
{% block page_product_detail_buy_form %}
{% if page.product.active and page.product.customFields.custom_product_remove_buy_button != true %}
<div class="product-detail-form-container">
{% sw_include '#Storefront/storefront/page/product-detail/buy-widget-form.html.twig' %}
</div>
{% endif %}
{% endblock %}
To remove the button in the product listing, create a file src/Resources/views/storefront/component/product/card/action.html.twig:
{% sw_extends '#Storefront/storefront/component/product/card/action.html.twig' %}
{% block component_product_box_action_buy %}
{% if product.customFields.custom_product_remove_buy_button != true %}
{{ parent() }}
{% endif %}
{% endblock %}
Setting the Max. order quantity to 0 will result in not showing a buy button on the product detail page. However it is still possible to add the product via the listing. To fix this you can extend this file as mentioned before:
src/Resources/views/storefront/component/product/card/action.html.twig
{% block component_product_box_action_buy %}
{% if product.calculatedMaxPurchase > 0 %}
{{ parent() }}
{% endif %}
{% endblock %}
If the user somehow manages to add the product in the cart Shopware will throw a default error message:
The product "Test" is not available any more
I'm working on a design system and just getting my head around the component way of thinking.
We're using Nunjucks and Fractal.
We have an existing component, an accordion which gets it's data from a JSON object. The props being title and content.
I've built a component, like a table of contents, which displays a list of styled links, using a simple loop, pulling in from a ToC.config.js file.
I need to include that new component within the accordion component, the ToC has a title and an array containing urls and text for each link.
At present I've just copied the HTML from the accordion's view in Fractal, but that's probably not the way to go, but visually it's as the designer requires.
I can also render the accordion correctly if I put all the links, HTML and all in the config, as a string, but that's not the way it should work either.
What I want to do, which is probably the proper way, is pull that accordion in and populate it with my ToC component.
{% render '#my-accordion', 'accordion: items' %} doesn't do what I want and I can't seem to figure out how to achieve what I need to do.
Something like so:
{% render '#my-accordion' %}
// Pass in data from ToC, somehow
{{ title: title }}
{% for item in items %}
{{ item.text etc }}
{% endfor %}
Then I would have my accordion component, where its title, links and HTML etc are those from my ToC component. Sorry for the rough pseudo above, it's more an example of what I want to do. I can't copy code to an external resource.
using render doesn't appear to be the way to go, unless I'm missing something? I can't pass the list through as a string as it has classes and aria for the current page etc and content authors will be building pages with these.
A little nudge in the right direction would be great.
You can add a render-filter that similar to include and macro.
import 'nunjucks.min.js';
var env = new nunjucks.Environment({autoescape: true});
env.addFilter('render', function (template, ctx) {
const html = env.render(template, ctx); // try-catch
return env.filters.safe(html);
});
Usage
// table.njk
<table>
{% for e in rows %}
{% 'row.njk' | render({row: e}) %}
{% endfor %}
</table>
// row.njk
<tr>
{% for c in row.cols %}
<td> {{ c.name }} </td>
{% endfor %}
</tr>
im trying to output an attribute of a product on my product page (opencart v3).
The attribute is called 'technicaldetails' and it works just fine using this code:
{% if attribute_groups %}
{% for attribute_group in attribute_groups %}
{% if attribute_group.name == 'technicaldetails' %}
{% for attribute in attribute_group.attribute %}
{{ attribute.text }}
{% endfor %}
{% endif %}
{% endfor %}
{% endif %}
but the technical details field have unstyled list stored in it.. and this outputs the complete html instead of rendering the list.
ive tried using {{ attribute.text|e }} and {{ attribute.text|raw }} and many other alternatives i could find.. but each time is just throws out the html and not render it..
in php this used to work.
<?php echo html_entity_decode($attribute['text']); ?>
so how can i decode the html now as i cant use php in twig and there is no html_entity_decode in twig either :(
looking forward for somehelp :)
much appreciated
thanks.
Just register the html_entity_decode function in twig.
The most simple way is to look where twig is loaded and add the following code,
$twig->addFilter(new \Twig_Simple_Filter, 'html_entity_decode', 'html_entity_decode');
After that you can just do the following in your twig templates
{{ attribute.text|html_entity_decode }}
UPDATE: For Opencart 3.0.3.7 version filter should be like this:
$twig->addFilter(new \Twig\TwigFilter('html_entity_decode','html_entity_decode'));
Find file
document_root/system/library/template/twig.php
Just after
$this->twig = new \Twig_Environment($loader, $config);
add following code
$twig->addFilter(new \Twig_SimpleFilter('html_entity_decode', 'html_entity_decode'));
After doing this, you must went to admin to reload all modifications in menu Extensions -> modifications.
After that you can do the following in all twig files *.twig
{{ attribute.text|html_entity_decode }}
I have made a few pages in grav with a taxonomy like this.
- Home (category type)
- programming (category type)
- stuff (category type)
- stuff1 (page type)
- stuff2 (page type)
- stuff3 (page type)
I've also made a template type called "category" which should hopefully grab all the links to stuff1/2/3 and place them on the "stuff" page as links. My code looks a bit like this:
{% block body %}
{% block content %}
<ul>
{% for p in self.children %}
<li>{{ p.title }}</li>
{% endfor %}
</ul>
{% endblock %}
{% endblock %}
The end goal is to just get a simple listing of links for children to the category something like:
<ul>
<li>stuff1</li>
<li>stuff2</li>
<li>stuff3</li>
</ul>
I've tried using page.children, self.children, and a few other things but nothing seems to be getting this to work the way that I want it to.
Any help would be appreciated.
I'm afraid I do not quite understand what you mean by 'category type' and 'page type...
The docs on Page Collections might be quite helpful.
Example:
If you want a page with template 'category.html.twig' which shows a list of urls to all pages containing a certain category (or tag), you can do the following:
create a page 'category.md' defining a collection of categories in frontmatter:
content:
items:
'#taxonomy.category': mycategory
Create a template 'category.html.twig' containing:
<ul>
{% for p in page.collection() %}
<li>{{p.title}}</li>
{% endfor %}
</ul>
The resulting page will look like:
<ul>
<li>Home</li>
<li>Body & Hero Classes</li>
</ul>