Jump to content

Welcome, Guest!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

jollyfrog

I will help design a new thirty bees theme

Recommended Posts

15 hours ago, wakabayashi said:

I have coded a very modular way of how a theme should work IMO. In general it adds a Framework in top of TB. Module Developer could save a lot of time and merchants would get a consistent design. But unfortunately it didn't get any real response in "DEV" Channel from TB. Either people are no more around or they are just no interested in creating big changes to an old system.

This is definitely something that would be interesting. I always thought that thirtybees/prestashop is not a real MVC because there is no real (V)iew layer. 

Your idea with reusable elements sounds quite interesting. However, I'm not sure how easily that could be implemented so they would work with all themes. Do you think it's possible?

Share this post


Link to post
Share on other sites

@led24ee I am not yet at product listing part. But why do you want to see the code from there?

My way of doing it will be more modular than now...

@datakick Right now my thing is too raw. But I think it's possible. But in general I believe, that each theme should override this components. I know it's not realistic for old themes, thats why there needs to be a default solution for each component. 

There are two things planned:

  1. Elements: This is simple stuff like buttons, lists or up to a spinner. We just standardize the behaviour of classes. A theme needs to tell, which classes will be applied on a "large call to action button". It's easy in achievable in the conig file. I would state there something like "genzo_button large". A theme that relies on bootstrap will set "btn btn-primary btn-large". A Module developer can now use: 
    <a class="{$css_selector.button_primary} {$css_selector.button_large}">Something</a>

    It would throw in the right classes depening on the theme used. 

  2. Components: This is stuff that needs a serious markup. For example: lists, tables, cards and so on. Each theme should then deliver his own tpl file to a component. For example a very simple component (card_default) looks like this:

    <div class="">
    	<div class="group block w-full h-auto rounded-lg bg-gray-100 overflow-hidden">
    		<img src="{$component.image.src}" alt="" class="object-cover pointer-events-none group-hover:opacity-75">
    	</div>
    	<p class="heading_section mt-2 ml-2">{$component.section}</p>
    	<p class="ml-2 text-sm text-gray-500">{$component.title}</p>
    </div>

    A bootstrap theme would deliver a very similair markup with different styles ofc. A module dev can now use something like:

            $category_1_data = [
                'title' => 'Azul - Uno - Memoarrr',
                'section' => 'Familienspiele',
                'image' => [
                    'src' => '/img/p/bla.jpg',
                ],
                'link' => [
                    'url' => '/category/link-1',
                ],
            ];
    
            $themeElement = new ThemeHelper(ThemeHelper::COMPONENT_CARD_SIMPLE, $category_1_data, false);
            return $themeElement->fetchElement();

    It will always render a card in the style, that the theme developer initially had in mind. So the design will stay consistent. And obviously the theme developer saves a lot of time as he doesn't need to come up with an own design (that will likely suck on some themes anyway). 
    The card example is of course very simple. There are much more powerful usecases like sliders, modals or whatsever. I am very confident that module devs can reduce their styling work up to 80% or so. Depending on the usecase ofc. 

    The usecase of such component wouldn't stop here. They would also be very powerful on pagebuilder or on shortcode modules. 

Share this post


Link to post
Share on other sites
7 hours ago, wakabayashi said:

@led24ee I am not yet at product listing part. But why do you want to see the code from there?

 

I have many products with almost the same name. Product code will be quickest way to identify products. Second solution is to rename all products and put something unique in first part of name. But there is 5000+ products, so it will be not easy.

Share this post


Link to post
Share on other sites
1 hour ago, led24ee said:

I have many products with almost the same name. Product code will be quickest way to identify products. Second solution is to rename all products and put something unique in first part of name. But there is 5000+ products, so it will be not easy.

I don't follow... what above info has to do how product listing code looks like?

Share this post


Link to post
Share on other sites
2 hours ago, led24ee said:

I have many products with almost the same name. Product code will be quickest way to identify products. Second solution is to rename all products and put something unique in first part of name. But there is 5000+ products, so it will be not easy.

To be honest, I wouldn't know how my or any other theme could help you in that. You should create a concept of how you want to name your product. In case it's a display thing, you could ofc tweak it a little to your needs. But you could do that already know.

Just want to make sure, that you want wait on anything, that probably won't help you to solve your problem...

Share this post


Link to post
Share on other sites
10 hours ago, wakabayashi said:

@datakick Right now my thing is too raw. But I think it's possible. But in general I believe, that each theme should override this components. I know it's not realistic for old themes, thats why there needs to be a default solution for each component. 

The main issue I have with this concept is the different level of support of these elements/components by themes.

Third party commercial themes would not come with templates for these components at all. Some themes might support only subset of components (maybe new components were introduced after the theme was released).

The only way I can see this to work is for every component to have some default, theme agnostic, template. And this might be hard to do, because such template would not be able to use any framework css, any framework js,...

Themes could, of course, override these default templates. But even if they did not override them, the components would still work to some extent.

Is this aligned with your vision?

Share this post


Link to post
Share on other sites
Posted (edited)
24 minutes ago, datakick said:

Is this aligned with your vision?

That's exactly what I thought too. I am not totally sure, if these default compoments aren't allowed to use any framework. I would just mean that we need to make sure that the libary is loaded. Right, the cleanest would be no framework... 

... BUT there is a big question behind it. Do we really want to to build JS components like two range sliders, carousels, accordeon and so on? I highly doubt that's realistic. I haven't found a very good way for this right now. I am myself stuck how I should go. I have some symphaties for AlpineJS, but maybe it's not a good fit for TB. Already the usage of "{" can drive you crazy in smarty files. 

Any ideas from your side?

Edit: the reason why I have some hopes in AlpineJS is actually this: https://alpinejs.dev/patterns

Edited by wakabayashi

Share this post


Link to post
Share on other sites
27 minutes ago, datakick said:

The main issue I have with this concept is the different level of support of these elements/components by themes.

As you sai with "this concept", I wonder: are there any other other concepts that might work?

Note: for me it's not an option to say: oh you all have to use Bootstrap 5 or so.

Share this post


Link to post
Share on other sites
9 hours ago, cienislaw said:

I don't follow... what above info has to do how product listing code looks like?

 

Not programming code. I mean product code or SKU or whatever this name is.

Share this post


Link to post
Share on other sites
8 hours ago, wakabayashi said:

To be honest, I wouldn't know how my or any other theme could help you in that. You should create a concept of how you want to name your product. In case it's a display thing, you could ofc tweak it a little to your needs. But you could do that already know.

Just want to make sure, that you want wait on anything, that probably won't help you to solve your problem...

Of course I can customize. And then result is that I will not update, bc sooner or later there are too many things to modify after update. And when there is no update then why do I need donate anything ? But this is maybe little bit hard to understand.

Share this post


Link to post
Share on other sites
22 hours ago, led24ee said:

I would like to see product code on product listing.

Isn't it on there already, with Panda it is

If you want to add a Barcode this is what I use ie

 


 
                                       <p id="product_ean13"{if empty($product->ean13) || !$product->ean13} style="display: none;"{/if}>
    <label>{l s='EAN: '} </label>
    <span {if !empty($product->ean13) && $product->ean13} content="{$product->ean13}"{/if}>{$product->ean13|escape:'html':'UTF-8'}</span>
{if $enable_google_rich_snippets}<meta itemprop="gtin13" content="{$product->ean13|escape:'html':'UTF-8'}" />{/if}

     

 

Share this post


Link to post
Share on other sites
3 minutes ago, AndyC said:

Isn't it on there already, with Panda it is

If you want to add a Barcode this is what I use ie

 



 
                                       <p id="product_ean13"{if empty($product->ean13) || !$product->ean13} style="display: none;"{/if}>
    <label>{l s='EAN: '} </label>
    <span {if !empty($product->ean13) && $product->ean13} content="{$product->ean13}"{/if}>{$product->ean13|escape:'html':'UTF-8'}</span>
{if $enable_google_rich_snippets}<meta itemprop="gtin13" content="{$product->ean13|escape:'html':'UTF-8'}" />{/if}

     

 

 I have niara. I try not to modify. But with product code I mean this situation when You look not one product but many product in category view. Or product comparison. There is only name and price. So in case there are similar names then You need to click on product to get product code (or SKU or reference or whatever word it is) to get product  unambiguously determined. But there is video from Nemo about this. I will try this. So far looks like it is very hard to make configuration page in BO where You can determine what info is visible on product page.

Share this post


Link to post
Share on other sites

{$product.reference} or {$product->reference} is probably the thing you are looking for. 

Share this post


Link to post
Share on other sites
Posted (edited)
On 10/8/2021 at 10:22 PM, wakabayashi said:

{$product.reference} or {$product->reference} is probably the thing you are looking for. 

Thanks. I will try.

 

 

Well. I finally got it work.

Edited by led24ee
update
  • Like 1

Share this post


Link to post
Share on other sites

I have now started, to develop a front office module, thats implements a "framework" for thirty bees. Technically this is not super complex and it works already quite good. But if this should become the new standard in thirty bees, I need some help. We will need to design default styles. Who is ready to help on this project?

What you knowledge do you need?

  1. (very) good knowledge of CSS
  2. Been able to work on tpl files. So you need HTML knowledge and basic knowledge in how to use {$any_random_variable}. 
  3. Knowledge in JS doesn't harm either, but a lot of elements/components don't need JS at all.

Of course I would give more informations in detail, what has to be done. Note: this is not a 20 minutes job. I expect that it takes multiple hours to "code" a clean responsive component.

@datakick is there any theme, that can be considered as the standard theme for tb? Is it niara? IMO the default styles of the framework should match well with the default theme. Obviously we will strike for some subtle design, that looks on all themes decent. 

Share this post


Link to post
Share on other sites

I haven't much experience. So when I try something it will take long time. But, I can try.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...