✍️ Objective - To display categories in homepage
Open the layout.html file
This is how a bare minimum layout.html file would look like, it has some code which is required for a theme to function properly, avoid removing any of this code.
Copy <!-- layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
{% include './../../dukaan/common/theme-fonts.html' %}
{{ 'splide.min.css' | css | static }}
{{ 'layout.css' | css | static }}
{{ 'styles.css' | css | static }}
{% include './../../dukaan/common/seo_tags/commonSeoTags.html' %}
{% include './../../dukaan/common/theme-colors.html' %}
{% block head %}
{% endblock head %}
{{ 'head' | DukaanBlocks }}
</head>
{% include './../../dukaan/common/spinner-loader.html' %}
<body class="flex d-column">
{% include './../../dukaan/common/hellobar.html' %}
<main class="flex flex-1 d-column">
{% block content %}
{% endblock content %}
</main>
{% include '../../dukaan/common/bxgy-sticky-footer.html' %}
{% include '../../dukaan/common/store-open-sticky.html' %}
{% block postfooter %}
{% endblock postfooter %}
{{ 'footer' | DukaanBlocks }}
{% include './product-variant-templates.html' %}
{{ 'variant-utils.js' | js | static }}
{{ 'dukaan-utils.js' | js | static }}
{{ 'layout.js' | js | static }}
{{ 'dukaan-coupons.js' | js | static({ defer: true }) }}
{{ 'dukaan-offers.js' | js | static({ defer: true }) }}
{{ 'axios.min.js' | js | static({ defer: true }) }}
{{ 'splide.min.js' | js | static }}
{{ 'common-components.css' | css | static }}
{% include './../../dukaan/common/auth.html' %}
{% include '../../dukaan/common/multilanguage.html' %}
{% include './../../dukaan/common/common-scripts.html' %}
{% include '../../dukaan/common/snackbar.html' %}
{% block script %}
{% endblock script %}
</body>
</html> If we check now, our site would be completely blank. Now, we will try to display a dummy category.
We will display a category image and category name, go ahead and paste this code inside the body tag.
Copy <div class="container">
<div class="category-card">
<a href="#" class="category-link">
<div class="category-image-wrapper">
<img width="300" height="300" src="https://i.imgur.com/ordhK4e.jpg" alt="Category 1" class="category-image">
</div>
<div class="category-name">Category 1</div>
</a>
</div>
</div> This code snippet creates a simple HTML structure to display a category card within a container. The category card includes an image and the category name, for now we have hardcoded a dummy image and category name, both wrapped within a hyperlink element for navigation purposes.
If you save & preview the changes, you'd see something like this
Let's try to add some more dummy categories, the updated code would be
Copy <div class="container">
<div class="category-card">
<a href="#" class="category-link">
<div class="category-image-wrapper">
<img width="300" height="300" src="https://i.imgur.com/ordhK4e.jpg" alt="Category 1" class="category-image">
</div>
<div class="category-name">Category 1</div>
</a>
</div>
<div class="category-card">
<a href="#" class="category-link">
<div class="category-image-wrapper">
<img width="300" height="300" src="https://i.imgur.com/ordhK4e.jpg" alt="Category 1" class="category-image">
</div>
<div class="category-name">Category 2</div>
</a>
</div>
<div class="category-card">
<a href="#" class="category-link">
<div class="category-image-wrapper">
<img width="300" height="300" src="https://i.imgur.com/ordhK4e.jpg" alt="Category 1" class="category-image">
</div>
<div class="category-name">Category 3</div>
</a>
</div>
</div> This is how our site looks now
Now that we can display dummy data with HTML its time to flare up the tags by spicing it up with some CSS in the next chapter.
Copy <!-- layout.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible"
content="IE=edge"/>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
{% include './../../dukaan/common/theme-fonts.html' %}
{{ 'splide.min.css' | css | static }}
{{ 'layout.css' | css | static }}
{{ 'styles.css' | css | static }}
{% include './../../dukaan/common/seo_tags/commonSeoTags.html' %}
{% include './../../dukaan/common/theme-colors.html' %}
{% block head %}
{% endblock head %}
{{ 'head' | DukaanBlocks }}
</head>
{% include './../../dukaan/common/spinner-loader.html' %}
<body class="flex d-column">
{% include './../../dukaan/common/hellobar.html' %}
<main class="flex flex-1 d-column">
<div class="container">
<div class="category-card">
<a href="#" class="category-link">
<div class="category-image-wrapper">
<img src="https://i.imgur.com/ordhK4e.jpg" alt="Category 1" class="category-image">
</div>
<div class="category-name">Category 1</div>
</a>
</div>
<div class="category-card">
<a href="#" class="category-link">
<div class="category-image-wrapper">
<img src="https://i.imgur.com/ordhK4e.jpg" alt="Category 1" class="category-image">
</div>
<div class="category-name">Category 2</div>
</a>
</div>
<div class="category-card">
<a href="#" class="category-link">
<div class="category-image-wrapper">
<img src="https://i.imgur.com/ordhK4e.jpg" alt="Category 1" class="category-image">
</div>
<div class="category-name">Category 3</div>
</a>
</div>
</div>
{% block content %}
{% endblock content %}
</main>
{% include '../../dukaan/common/bxgy-sticky-footer.html' %}
{% include '../../dukaan/common/store-open-sticky.html' %}
{% block postfooter %}
{% endblock postfooter %}
{{ 'footer' | DukaanBlocks }}
{% include './product-variant-templates.html' %}
{{ 'variant-utils.js' | js | static }}
{{ 'dukaan-utils.js' | js | static }}
{{ 'layout.js' | js | static }}
{{ 'dukaan-coupons.js' | js | static({ defer: true }) }}
{{ 'dukaan-offers.js' | js | static({ defer: true }) }}
{{ 'axios.min.js' | js | static({ defer: true }) }}
{{ 'splide.min.js' | js | static }}
{{ 'common-components.css' | css | static }}
{% include './../../dukaan/common/auth.html' %}
{% include '../../dukaan/common/multilanguage.html' %}
{% include './../../dukaan/common/common-scripts.html' %}
{% include '../../dukaan/common/snackbar.html' %}
{% block script %}
{% endblock script %}
</body>
</html> 
