Hello,
just discovered Arastta, best solution for my project for now
I am trying to adjust it to my needs, but have few questions.
1. Is it possible to modify the slideshow module, so that I can add custom text to it from Admin Panel? I mean, maybe we can put an additional inputbox for the custom text and then display it above the selected image from banners? It would be easier this way for the client to manage his landing slideshows, without editing text in Photoshop.
2. Product collections. In my case, the shop will sell clothes. Lets say I have 5 categories of products. Manufacturer produces a new line of clothes, a so called new collection that includes products from 3 categories from the shop. I want to have dedicated pages for every new collection, that will show only products linked to this collection. So is it possible to create a collection from Admin panel, just like categories, and then when you add a product, you link it to you collection from a select dropdown? Now I can work around this idea with tags, but it is not fulfilling all my needs.
Thank you
just discovered Arastta, best solution for my project for now
I am trying to adjust it to my needs, but have few questions.1. Is it possible to modify the slideshow module, so that I can add custom text to it from Admin Panel? I mean, maybe we can put an additional inputbox for the custom text and then display it above the selected image from banners? It would be easier this way for the client to manage his landing slideshows, without editing text in Photoshop.
2. Product collections. In my case, the shop will sell clothes. Lets say I have 5 categories of products. Manufacturer produces a new line of clothes, a so called new collection that includes products from 3 categories from the shop. I want to have dedicated pages for every new collection, that will show only products linked to this collection. So is it possible to create a collection from Admin panel, just like categories, and then when you add a product, you link it to you collection from a select dropdown? Now I can work around this idea with tags, but it is not fulfilling all my needs.
Thank you
In General
Share this post:
Accepted Answer
Hi Kab,
For the slider you could experiment with the template file for the "Slideshow" module for example as it is not too complicated:
/catalog/view/theme/second/template/module/slideshow.tpl
If you replace the above code with this to use the "Banner" Link text for a text overlay caption or just hard code it to see it working.
Then adjust the "text font size" and "right position" (pixels or percentage) values in the CSS to suit your needs?
All of the main pages can be modified either with the Settings->Appearance->Layout. A custom page could be created and used or you could modify one of the existing pages. You can just hard code your own content directly into any page template or access the information via the Arastta API or directly to the MYSQL database. Probably best practice is to use the correct method by examining an existing module until you understand it.
If you copy an existing module (like "Slideshow" but rename all of the files it uses and also rename the content in these files accordingly to the new module name) you can then have your own new module use in "Admin" too.
The HTMLContent module is pretty useful as you can pretty well add any content (except PHP) into them. Even if the client cannot easily alter them in the WYSIWYG editor ( a bit unpredictable) they can still drag and drop it to the left, right, top or bottom of the pages.
The Summernote Editor has a "Code" option by default in the tool bar as opposed to using the TinyMCE Editor (System->Users->Users->Editor).
What is a reasonble fee?
Regards,
Hackasacka
For the slider you could experiment with the template file for the "Slideshow" module for example as it is not too complicated:
/catalog/view/theme/second/template/module/slideshow.tpl
<div id="slideshow<?php echo $module; ?>" class="owl-carousel" style="opacity: 1;">
<?php foreach ($banners as $banner) { ?>
<div class="item">
<?php if ($banner['link']) { ?>
<a href="/<?php echo $banner['link']; ?>"><img src="/<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<img src="/<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>"class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
<s-cript type="text/j-avascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 6,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: <?php echo ($pagination) ? 'true' : 'false'; ?>
});
--></script>
If you replace the above code with this to use the "Banner" Link text for a text overlay caption or just hard code it to see it working.
<s-tyle>
.owl-carousel div h2, .owl-carousel div .item .textoverlay{
position:absolute;
right: 40%;
color:#000;
font-size:25px;
display:block;
}
</style>
<div style="position: relative;">
<div id="slideshow<?php echo $module; ?>" class="owl-carousel" style="opacity: 1;">
<?php foreach ($banners as $banner) { ?>
<div class="item textoverlay">
<?php if ($banner['link']) { ?>
<a href="/<?php echo $banner['link']; ?>"><h2><?php echo $banner['link']; ?></h2><img src="/<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" class="img-responsive" /></a>
<?php } else { ?>
<h2><?php echo $banner['link']; ?></h2><img src="/<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" title="<?php echo $banner['title']; ?>"class="img-responsive" />
<?php } ?>
</div>
<?php } ?>
</div>
</div>
<s-cript type="text/j-avascript"><!--
$('#slideshow<?php echo $module; ?>').owlCarousel({
items: 6,
singleItem: true,
navigation: true,
navigationText: ['<i class="fa fa-chevron-left fa-5x"></i>', '<i class="fa fa-chevron-right fa-5x"></i>'],
pagination: <?php echo ($pagination) ? 'true' : 'false'; ?>
});
--></script>Then adjust the "text font size" and "right position" (pixels or percentage) values in the CSS to suit your needs?
All of the main pages can be modified either with the Settings->Appearance->Layout. A custom page could be created and used or you could modify one of the existing pages. You can just hard code your own content directly into any page template or access the information via the Arastta API or directly to the MYSQL database. Probably best practice is to use the correct method by examining an existing module until you understand it.
If you copy an existing module (like "Slideshow" but rename all of the files it uses and also rename the content in these files accordingly to the new module name) you can then have your own new module use in "Admin" too.
The HTMLContent module is pretty useful as you can pretty well add any content (except PHP) into them. Even if the client cannot easily alter them in the WYSIWYG editor ( a bit unpredictable) they can still drag and drop it to the left, right, top or bottom of the pages.
The Summernote Editor has a "Code" option by default in the tool bar as opposed to using the TinyMCE Editor (System->Users->Users->Editor).
What is a reasonble fee?
Regards,
Hackasacka
Responses (5)
-
Accepted Answer
Hi Kab,
You could edit the existing slide show carousel that uses "Owl Carousel" (a popular carousel) as can be seen in the header if view source:-
<l-ink href="/catalog/view/j-avascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
<l-ink href="/catalog/view/j-avascript/jquery/owl-carousel/owl.transitions.css" type="text/css" rel="stylesheet" media="screen" />
<s-cript src="/catalog/view/j-avascript/jquery/owl-carousel/owl.carousel.min.js" type="text/j-avascript"></script>
By default there is a Slideshow and Carousel module using Owl.
Have a look at the documentation for this online and see if it already has the capability?
https://owlcarousel2.github.io/owlcarousel2/
As Arastta uses this Carousel & Slidshow Module in conjunction with "Banners" (which have a banner name and multiple options to add images and text titles and links), you could probably easily modify the module to suit your needs.
Possibly also an radio button option to turn text titles on / off would be useful too or copy this module to a new one of your own (with a different name). This is because although you may require titles for some slideshows, you may not for all of them. If you hack the module it may well break the layout where it is used elsewhere. It sounds like you require something like a "Hero Header Slideshow" new module.
If they are capable of scaling an image so that it is suitable for a slideshow then they can probably add text, else don't let them break the layout with unexpected results.
With regards to the collections the easiest would be to create additional sub-categories to add the "collections" to, as Arastta allows a product to be in multiple categories eg. a T-shirt could be in the T-shirts category and perhaps a Summer Collections category too. Just add a top level category called "Collections" or perhaps have an extra category for the brand label with a sub-category for collections in addition to the Manufacturer? The dedicated page for collections is then just a standard "category page named after the collection.
The Appearance -> Layout could then help you customise the "Category" layout further.
A module like "Featured" could be copied and modified to group products together and then output the results in the layouts too.
A dedicated module and custom pages may be necessary if this is insufficient to your customers needs?
Regards,
Hackasacka -
Accepted Answer
Thank you for reply,
I will try out to figure with the slider. Regarding the so called collections, the solution you gave might work just as needed. To adjust the look of the front-page to the needs, I can select a custom template, right?
One more question, is there anyone who would implement a theme from a custom html template? I will pay a reasonable fee for that.
Thank you -
Accepted Answer
You name it. Usually themes costs about $50, so I can pay this price for porting a theme to Arastta from a HTML template, or for example an OpenCart theme. If you can help me with porting, I can search a OC theme or HTML template that would suit my needs and give it to you. I have a list of features that I need to be implemented, colors and fonts are not that important, I can adjust them myself. So you name your price if you can help me with this.
Thank you -
Accepted Answer
Hi Kab,
If you search for an Opencart template you will require it to work with v2.0x for it to translate most easily. Possibly find an example template that you like and include the link so we can also preview the design.
Bear in mind that any advanced layout features they may include will not necessarily work out of the box, even the templates themselves don't always work so look for support to be included too.
It might be simpler to use Opencart instead at this stage?
Regards,
Hackasacka -
Accepted Answer
Hi Kab,
Have you had a look at the Arastta Marketplace as if you can find one here that closely matches your design preference it would save a lot of time and energy.
https://themes.arastta.pro/
Peruse all of the categories as the navigation and choice is not marvellous but it should give you some ideas. A few are also free too.
Many of the available themes are very similar except for the styling and maybe an extra widget that makes it look more unique. They can look attractive due to well chosen graphics, but may not look so good with your own media.
The Arastta "Second" template could be copied and then modified significantly to polish the look and feel on all the various screens sizes and devices. It may not be worth buying a complete ecommerce template when all you need is an extra slide show with animated text, as you could implement this with basic code yourself. Add some CSS to turn hide modules or other items with "display: none" for certain media sizes and as it's "Bootstrap" also modify a few column widths too. Possibly an HTML Bootstrap template could also work as you only need to change the Catalog View template .tpl files keeping the Javascript and PHP and maybe a few classes and id's.
You can view source any web site to see how they are designed and for ideas too.
Hope this helps.
Regards,
Hackasacka
Your Reply
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here.
Register Here »