Prestashop 및 ImageKit

최근에 우리는 매우 유용한 서비스를 발견했다imagekit.io.

Image CDN with automatic optimization, real-time transformation, and storage that you can integrate with existing setup in minutes.

이 서비스가 가장 놀라운 것은 무료 계획이 있고, 매우 아낌없는 기능과 수당이 있다는 것이다.
그것으로 공연 전의 주제를 만들어 봅시다.
우선, 우리는 imagekit.io에 계정을 만들어야 한다.이메일을 확인하면 계정에 로그인할 수 있습니다.첫 번째 단계에서는 IMAGEKIT ID를 입력해야 합니다. 기본적으로 이것은 임의 문자열 값입니다.이 무작위 문자열을 의미 있는 내용으로 바꾸는 것은 의미가 있다. 예를 들어 사이트 도메인 이름의 주요 부분이다.모든 설정을 설정한 후에는 IMAGEKIT ID를 변경할 수 없습니다. 지금 변경하십시오.
이어서 이미지키 용어가 혼란스러워졌다.ImageKit.io에 기존 소스를 첨부해야 합니다.ImageKit에서 기존 원점 첨부를 클릭합니다.io 링크를 누르고 새 원점 추가 단추를 누르십시오.소스 이름은 모든 문자열일 수 있으며 소스 유형에 대해서는 웹 폴더-HTTP(S) 서버와 Magento, Shopify,Wordpress 등을 선택합니다.기본 URL의 경우 https://www.example.com(/images 하위 폴더 없음) 등의 기본 URL을 사용합니다.아래쪽 확인란이 선택되지 않은 상태로 유지한 다음 제출 을 클릭합니다.
무엇이 나를 좀 곤혹스럽게 하는가. 당신은 어디에서 이 새로 창립된 기원을 찾을 수 있습니까?왼쪽의 URL 끝점 메뉴에서기본 URL 끝점을 찾습니다.그것을 클릭하면 여기에서 당신의 기원을 편집할 수 있습니다.Prestashop의 멀티스토어 기능을 사용하고 있다면, 새로운 "origin"이 필요할 수도 있습니다.예를 들어, 우리는Prestashop-gellifique에 두 개의 상점과 두 개의 도메인 이름이 있다.co.uk은 영국 상점과gellifique에 서비스를 제공합니다.유럽연합은 스페인 상점을 대표한다.두 도메인 모두 Imagekit 기본 URL 끝점에 별도의 소스로 추가되어야 합니다.하나의 종점, 두 개의 기점.이것은 좀 곤혹스럽다.
기본적으로 모두 완성되었다.이제 주제의 원래 URL 대신 ImageKit URL을 사용할 수 있습니다.나는 클래식 테마에서 업데이트해야 할 모든 템플릿을 정밀하게 포지셔닝하고 싶지만, 사실상 우리가 클래식 테마를 사용하여 우리의 인터넷 상점에서 사용자 정의 테마를 만든 이래로 클래식 테마는 이미 큰 변화가 생겼다.우리의 예에서, 나는 이 파일들을 수정해야 한다. (/themes/mytheme/folder 아래)

templates/catalog/listing/category.tpl 
templates/catalog/_partials/product-cover-thumbnails.tpl 
templates/catalog/_partials/product-images-modal.tpl 
templates/catalog/_partials/miniatures/product.tpl 
modules/ps_imageslider/views/templates/hook/slider.tpl 

고전 테마의 최신 버전에서 일부 파일은 두 개 이상의 파일로 나누어졌고 일부 인용은 다른 곳으로 옮겨졌을 수도 있습니다.그래서 나는 아마도 유행이 지난 판본에 대한 나의 예시를 보여줄 것이다.이 파일을 살펴보겠습니다.

templates/catalog/_partials/miniatures/product.tpl 

보아하니 변화가 크지 않다.제품 이미지 참조서(33-37 행)를 찾아보겠습니다.

<img
  src="{$product.cover.bySize.home_default.url}"
  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
  data-full-size-image-url="{$product.cover.large.url}"
/>

우리는 src 속성을 바꿔야 합니다. 무엇을 사용합니까?PHP parse url() 함수는 다음을 지원합니다.

src = "https://ik.imagekit.io/ourimagekitid{parse_url($product.cover.bySize.home_default.url, PHP_URL_PATH)}"

여기서 ourimagekitid는 우리가 이전에 설정한 IMAGEKIT ID입니다.이 이미지의 정확한 크기를 알고 있는 경우 Imagekit에 다음과 같이 지정할 수 있습니다.

src = "https://ik.imagekit.io/ourimagekitid/tr:w-250,h-250{parse_url($product.cover.bySize.home_default.url, PHP_URL_PATH)}"

남은 템플릿에 대해 비슷한 연습을 하면 임무가 완성됩니다!그러나...
여러 파일에 IMAGEKIT ID를 하드코딩해야 합니다.안 좋아요.다음 질문 - 개발 환경과 같은 ImageKit를 완전히 닫아야 할 때가 있습니다.마지막 (적어도 나에게는) ImageKit가 캐시를 지울 수 있도록 해 주지만, 설령 그렇지 않더라도, 캐시가 즉각 발생하지 않도록 파일별로 지정해야 한다.때때로, 너는 반드시 몇 분을 기다려야만 그것이 효과를 낼 수 있다.가장 좋은 것은 파일 버전 제어, 예를 들어 추가?URL 끝으로 이동합니다.
그러면 다른 Prestashop 모듈을 작성해 보겠습니다.
앞서 설명한 대로 (see my first article 를 사용하여 모듈 프레임워크를 만들 것입니다.
https://validator.prestashop.com/generator
우리는 두 개의 갈고리를 등록할 것이다.

public function install()
{
    Configuration::updateValue('IMAGEKIT_LIVE_MODE', false);
    return parent::install() &&
            $this->registerHook('actionDispatcher') && 
            $this->registerHook('backOfficeHeader');
}

"backOfficeHeader"갈고리는 일부 js 파일을 백엔드에 추가하는 데만 사용됩니다. (중요하지 않습니다.)

public function hookBackOfficeHeader()
{
    if (Tools::getValue('configure') == $this->name || Tools::getValue('module_name') == $this->name) {
        $this->context->controller->addJS($this->_path.'views/js/back.js');
    }
}

가장 중요한 것은 우리의 일이다.Smarty 템플릿에 대한 사용자 정의 플러그인을 정의할 수 있습니다.이 플러그인은 Smarty 템플릿에서 함수로 사용할 수 있습니다

public function hookActionDispatcher(){
    $this->context->smarty->registerPlugin('function', 'imagekit', array('Imagekit', 'imagekitUrl'));
}

함수는 ImageKit 이미지 구성에 필요한 URL을 구현합니다.

public static function imagekitUrl($params,$smarty) {
    if ($params['url']) {
        if ( Configuration::get('IMAGEKIT_LIVE_MODE', false) && Configuration::get('IMAGEKIT_ENDPOINT', '')) {
            $tr = $params['tr'] ? 'tr:'.$params['tr'] : '';
            $v = $params['v'] ? '?'.Configuration::get('IMAGEKIT_TS', '') : '';
              return Configuration::get('IMAGEKIT_ENDPOINT', '') . $tr . parse_url($params['url'],PHP_URL_PATH) . $v;
        }

        return $params['url'];
    }
    return '';
}

모듈 설정에서 설정 파라미터를 가져옵니다.IMAGEKIT LIVE 모드에서는 를 클릭하여 IMAGEKIT를 열기/닫을 수 있습니다.함수에 전달되는 매개 변수는 'url','tr ',' v '(' url '매개 변수만 필수) 입니다."tr"는 ImageKit 형식으로 필요한 변환을 설정하고 v=1(기본값 0)에 시간 스탬프 "?"질의가 URL에 링크됩니다.
지금은templates/catalog/partials/minimatures/product의 src 속성입니다.tpl 템플릿은 다음과 같습니다.

src = "{imagekit tr='w-250,h-250' url=$product.cover.bySize.home_default.url}"

그럼'v'파라미터는요? 왜 이렇게 윙윙 소리가 나요?나는 유일하게 의미 있는 곳이 템플릿/디렉터리/목록/종류라는 것을 발견했다.tpl 템플릿.이것은 유일하게 이전과 같은 이름으로 새 그림을 저장하는 곳이다.예를 들어, id가 25인 범주에 새 이미지를 업로드하면 이미지 URL은/ig/c/25가 됩니다.jpg.만약 당신이 새로운 사진을 올린다면, 그것은 여전히 이 이름을 가지고 있을 것이다.따라서 ImageKit는 이것이 같은 사진이라고 생각할 것이다.정확한 URL을 알고 있는 경우 ImageKit 대시보드에서 캐시를 지울 수 있습니다. 그러면 변경이 발생할 수 있습니다.하지만 나에게는 버전 제어를 도입하는 것이 더 쉽다.모듈 설정에 들어가야 합니다. 버전 (시간 스탬프) 필드를 두 번 눌러서ans에 설정을 저장해야 합니다.및 이미지 URL:

/img/c/25.jpg

이렇게 돼요.

/img/c/25.jpg?1623440107030

ImageKit는 새 이미지로 간주됩니다.
모든 다른 템플릿에서Prestashop은 실제 파일 이름이나 임의의 값을 사용하여 유일한 이미지 이름을 생성합니다. 이런 문제는 발생하지 않습니다.
그래서 파일 템플릿/디렉터리/목록/클래스에 있습니다.타사 물류
줄을 서다

<img class="replace-2x" 
    src="{$link->getCatImageLink($subcategory.link_rewrite,$subcategory.id_image,'')}"
    alt="{$subcategory.name|escape:'html':'UTF-8'}"/>

되다

<img class="replace-2x" 
    src="{imagekit tr='w-230,h-230' v=1 url=$link->getCatImageLink($subcategory.link_rewrite,$subcategory.id_image,'')}"
    alt="{$subcategory.name|escape:'html':'UTF-8'}"/>

나는 현대판의 고전 주제에서 유사한 선을 찾을 수 없다.아마도 현대 고전 주제에 하위 클래스 이미지가 전혀 나타나지 않았을 것입니다.
자, 모든 것이 나의 요구에 따라 진행되었다.내가 해결할 수 없는 작은 문제 하나만 빼고는아마도 어떤 독자들은 나에게 정확한 방향을 가리켜 줄 것이다.
만약 어떤 원인으로 인해, 나는 나의 모듈의 등록을 취소하거나 비활성화할 것이다. 모든 이미지는 사라질 것이다.Smarty 플러그인 "imagekit"이 존재하지 않기 때문입니다.나는 나의 틀에서 이런 일을 하고 싶다.

<img class="replace-2x" 
        {if function_exists("imagekitUrl")}
            src="{imagekit tr='w-230,h-230' v=1 url=$link->getCatImageLink($subcategory.link_rewrite,$subcategory.id_image,'')}"
        {else}
            src="{$link->getCatImageLink($subcategory.link_rewrite,$subcategory.id_image,'')}"
     {/if}
         />

그러나 어떤 이유로 작용하지 않는 것 같다.도와줄 사람 있어요?(아마도 나는 Smarty plugin에서'function'대신'Modifir'를 사용해야 할 것이다. 이것은 사용하는 것보다 더 간단할 것이다?)
일반적으로 모듈의 소스 코드는 GitHub에 있습니다.
https://github.com/vallka/prestamodule_imagekit.git